:root{
    --brand:#2b66b7;
    --muted:#526274;
    --pill-bg:#eef6ff;
    --pill-bd:rgba(31,55,86,.14);
    --nav-h: 78px;

    --mm-radius: 22px;

    /* hero */
    --hero-h: clamp(260px, 38vw, 860px);

    /* content sizing */
    --h1: 3.15rem;
    --p: 1.06rem;

    /* team diagonal */
    --team-cut-h: 120px;
    --team-cut-skew: -6deg;

    /* logos slider */
    --logos-gap: 22px;
    --logos-fade: 56px;
    --logo-box-h: 72px;
    --logo-img-h: 44px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

iframe{
    display:block;
    border:0;
}

body{
    padding-top: var(--nav-h);
    overflow-x: hidden;
}

/* ================= NAV ================= */
.mk-nav{
    background:#fff;
    border-bottom:1px solid rgba(16,24,40,.06);
    z-index:1030;
    min-height: var(--nav-h);
}

.mk-nav .container{
    display:flex;
    align-items:center;
    min-height: var(--nav-h);
}

.mk-nav .navbar-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
    padding:10px 0;
    margin-right:1rem;
    flex:0 0 auto;
    gap:0;
}

.mk-nav .navbar-brand img{
    display:block;
    width:auto !important;
    height:56px;
    max-width:240px;
    object-fit:contain;
}

.mk-nav .navbar-collapse{
    min-height: var(--nav-h);
    align-items:center;
    flex-grow:1;
}

.mk-nav .navbar-nav{
    gap:18px;
    align-items:center;
}

.mk-nav .nav-item{
    position:relative;
}

.mk-nav .nav-link{
    color: var(--muted);
    font-weight:650;
    font-size:1.05rem;
    padding:0 .35rem;
    line-height: var(--nav-h);
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border-radius:12px;
    outline:none;
    box-shadow:none !important;
    white-space:nowrap;
    min-height:48px;
}

.mk-nav .nav-link:hover{
    color: var(--brand);
    background: rgba(43,102,183,.06);
}

.mk-nav .nav-link.active{
    color: var(--brand);
    background: transparent;
}

.mk-nav .nav-link:focus{
    outline:none;
}

.mk-nav .nav-link:focus-visible{
    box-shadow: 0 0 0 3px rgba(43,102,183,.22) !important;
    background: rgba(43,102,183,.06);
}

.mk-nav .dropdown-toggle::after{
    display:none;
}

.mk-caret{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background: rgba(43,102,183,.10);
    color: var(--brand);
    transform: translateY(1px);
    transition: transform .18s ease, background-color .18s ease;
    font-size:.82rem;
    line-height:1;
    flex:0 0 auto;
}

.mk-nav .dropdown.show .mk-caret,
.mk-nav .dropdown .show + .mk-caret{
    transform: translateY(1px) rotate(180deg);
    background: rgba(43,102,183,.16);
}

.mk-phone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:.75rem 1.1rem;
    border-radius:999px;
    background: var(--pill-bg);
    border:1px solid var(--pill-bd);
    color:#1f3556;
    font-weight:750;
    text-decoration:none;
    white-space:nowrap;
    font-size:1rem;
    min-height:46px;
}

.mk-phone .bi{
    color:var(--brand);
}

.mk-phone:hover{
    color:#1f3556;
    background:#e7f1fd;
    text-decoration:none;
}

.mk-nav .d-flex.align-items-center.py-2.py-lg-0{
    margin-left:auto;
    padding-left:1rem;
}

.mk-nav .navbar-toggler{
    border:1px solid rgba(16,24,40,.14);
    border-radius:16px;
    padding:.55rem .7rem;
    margin-left:auto;
    background:#fff;
}

.mk-nav .navbar-toggler:focus{
    box-shadow: 0 0 0 .2rem rgba(43,102,183,.18);
}

.mk-nav .navbar-toggler-icon{
    background-image: var(--bs-navbar-toggler-icon-bg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2816,24,40,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"));
}

/* ================= MEGA MENU ================= */
.mk-mega{
    min-width:720px;
    max-width:calc(100vw - 24px);
    padding:16px;
    border-radius: var(--mm-radius);
    border:1px solid rgba(16,24,40,.08);
    background: rgba(255,255,255,.97);
    box-shadow: 0 26px 70px rgba(16,24,40,.16);
    margin-top:12px;
    backdrop-filter: blur(12px);
    position:relative;
}

.mk-mega-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:2px 6px 12px 6px;
    border-bottom:1px solid rgba(16,24,40,.06);
    margin-bottom:12px;
}

.mk-mega-title{
    margin:0;
    font-weight:800;
    font-size:1.05rem;
    color:#1f2f44;
    letter-spacing:.1px;
}

.mk-mega-sub{
    margin:0;
    color:#6b7788;
    font-size:.92rem;
    font-weight:600;
}

.mk-mega-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:6px 14px;
    padding:0 4px 4px 4px;
}

.mk-mega-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 12px;
    border-radius:14px;
    text-decoration:none;
    color:#1f2f44;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.1;
    transition: background-color .10s ease, transform .10s ease;
}

.mk-mega-link:hover{
    background: rgba(43,102,183,.08);
    transform: translateX(2px);
    color:#1f2f44;
}

.mk-mega-link:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(43,102,183,.20);
    background: rgba(43,102,183,.08);
}

.mk-ic{
    width:38px;
    height:38px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(43,102,183,.10);
    color: var(--brand);
    flex:0 0 auto;
    font-size:1.05rem;
}

/* ================= HERO ================= */
.hero-top{
    position:relative;
    overflow:hidden;
    background:
            radial-gradient(1200px 240px at 50% 0%, rgba(43,102,183,.12), rgba(255,255,255,0) 60%),
            linear-gradient(180deg, #ffffff 0%, #f1f5fb 55%, #ffffff 100%);
    z-index:1;
}

.hero-top img{
    width:100%;
    height: var(--hero-h);
    object-fit: cover;
    object-position: 50% 8%;
}

.hero-top .fog{
    position:absolute;
    top:-10%;
    right:-12%;
    width:60%;
    height:90%;
    background: radial-gradient(closest-side, rgba(255,255,255,.88), rgba(255,255,255,0));
    pointer-events:none;
    z-index:2;
}

.hero-top .wave{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:230px;
    z-index:3;
    pointer-events:none;
}

.hero-top .wave svg{
    width:100%;
    height:100%;
    display:block;
}

/* ================= INTRO ================= */
.intro{
    position:relative;
    overflow:hidden;
    background:
            radial-gradient(1200px 240px at 50% 0%, rgba(43,102,183,.12), rgba(255,255,255,0) 60%),
            linear-gradient(180deg, #ffffff 0%, #f1f5fb 55%, #ffffff 100%);
    padding:40px 0 20px;
}

.intro .intro-line{
    position:absolute;
    left:50%;
    transform: translateX(-50%) rotate(-2deg);
    width:min(1120px, calc(100% - 24px));
    height:3px;
    top: clamp(160px, 22vw, 290px);
    z-index:2;
    pointer-events:none;
    opacity:.9;
    background: linear-gradient(
            90deg,
            rgba(43,102,183,0) 0%,
            rgba(43,102,183,.12) 18%,
            rgba(43,102,183,.42) 50%,
            rgba(43,102,183,.14) 82%,
            rgba(43,102,183,0) 100%
    );
    filter: blur(.35px);
}

.intro .container{
    position:relative;
    z-index:3;
}

.intro h1{
    font-size: var(--h1);
    line-height:1.05;
    font-weight:900;
    color:#1f2f44;
    margin:0 0 18px 0;
    letter-spacing:.2px;
}

.intro .lead{
    font-size: var(--p);
    line-height:1.7;
    color:#5e6b7b;
    margin-bottom:12px;
}

.cta-pill{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.95rem 1.55rem;
    border-radius:999px;
    font-weight:900;
    font-size:1.05rem;
    text-decoration:none;
    color:#fff;
    background: linear-gradient(180deg, #2fb0e6, #1f86c3);
    box-shadow: 0 18px 46px rgba(31,134,195,.26);
    border:1px solid rgba(255,255,255,.38);
}

.cta-pill:hover{
    color:#fff;
    filter: brightness(.98);
}

.chev{
    display:inline-flex;
    align-items:center;
}

.chev-second{
    margin-left:-6px;
}

/* ================= TEAM CARD ================= */
.team-card{
    position:relative;
    width:100%;
    background:#fff;
    border:1px solid rgba(16,24,40,.10);
    box-shadow: 0 16px 40px rgba(16,24,40,.10);
    border-radius:18px;
    overflow:hidden;
}

.team-card img{
    width:100%;
    height:320px;
    object-fit: cover;
    display:block;
}

.team-card:not(.team-card--video)::after{
    content:"";
    position:absolute;
    left:-5%;
    right:-5%;
    bottom:-1px;
    height: var(--team-cut-h);
    transform: skewY(var(--team-cut-skew));
    transform-origin: bottom left;
    pointer-events:none;
    z-index:2;
}

.team-card--video{
    padding:0;
}

.team-card--video::after{
    display:none;
}

.responsive-video{
    position:relative;
    width:100%;
    aspect-ratio: 16 / 9;
    overflow:hidden;
    border-radius:18px;
    background:#000;
}

.responsive-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* ===== Feature Cards ===== */
.features{
    margin-top:26px;
    padding-bottom:6px;
    position:relative;
}

.features::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-40px;
    height:140px;
    background: radial-gradient(900px 140px at 50% 30%, rgba(43,102,183,.12), rgba(255,255,255,0) 65%);
    pointer-events:none;
}

.feature-card{
    background:#fff;
    border:1px solid rgba(16,24,40,.08);
    border-radius:18px;
    box-shadow: 0 14px 32px rgba(16,24,40,.10);
    padding:18px 22px;
    display:flex;
    align-items:center;
    gap:16px;
    min-height:96px;
}

.feature-ic{
    width:56px;
    height:56px;
    border-radius:18px;
    background: rgba(43,102,183,.10);
    color:#1f86c3;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    font-size:1.8rem;
}

.feature-title{
    margin:0;
    font-weight:900;
    color:#1f2f44;
    font-size:1.28rem;
    line-height:1.05;
}

/* ================= LOGOS SLIDER ================= */
.logos{
    position:relative;
    overflow:hidden;
    padding:18px 0 10px;
    opacity:.92;
}

.logos::before,
.logos::after{
    content:"";
    position:absolute;
    top:0;
    width: var(--logos-fade);
    height:100%;
    z-index:2;
    pointer-events:none;
}

.logos::before{
    left:0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.logos::after{
    right:0;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.logos-viewport{
    overflow:hidden;
    width:100%;
}

.logos-track{
    display:flex;
    transform: translateX(0);
    transition: transform .55s ease;
    will-change: transform;
}

.logos-slide{
    flex:0 0 100%;
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--logos-gap);
    align-items:center;
    min-height: var(--logo-box-h);
}

.logo-item{
    display:flex;
    align-items:center;
    justify-content:center;
    height: var(--logo-box-h);
    padding:8px 10px;
    min-width:0;
}

.logo-item img{
    width:100%;
    max-width:180px;
    height: var(--logo-img-h);
    max-height: var(--logo-img-h);
    object-fit: contain;
    object-position:center;
    display:block;
    filter:none;
}

@media (prefers-reduced-motion: reduce){
    .logos-track{
        transition:none;
    }
}

/* ================= KONTAKT ================= */
.mk-contact{
    position:relative;
    overflow:hidden;
    padding:64px 0 64px;
    background:
            radial-gradient(900px 520px at 82% 55%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
            radial-gradient(820px 520px at 14% 80%, rgba(255,255,255,.10), rgba(255,255,255,0) 65%),
            linear-gradient(180deg, #1e86b6 0%, #167ead 55%, #127aa8 100%);
}

.mk-contact::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 12% 78%, rgba(255,255,255,.12) 0 2px, rgba(255,255,255,0) 3px),
            radial-gradient(circle at 18% 72%, rgba(255,255,255,.10) 0 3px, rgba(255,255,255,0) 4px),
            radial-gradient(circle at 26% 84%, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 3px),
            radial-gradient(circle at 34% 76%, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 3px),
            radial-gradient(circle at 42% 86%, rgba(255,255,255,.08) 0 3px, rgba(255,255,255,0) 4px),
            radial-gradient(circle at 50% 78%, rgba(255,255,255,.08) 0 2px, rgba(255,255,255,0) 3px),
            radial-gradient(circle at 58% 88%, rgba(255,255,255,.08) 0 2px, rgba(255,255,255,0) 3px),
            radial-gradient(circle at 66% 78%, rgba(255,255,255,.07) 0 3px, rgba(255,255,255,0) 4px),
            radial-gradient(circle at 74% 86%, rgba(255,255,255,.07) 0 2px, rgba(255,255,255,0) 3px),
            radial-gradient(circle at 82% 80%, rgba(255,255,255,.06) 0 3px, rgba(255,255,255,0) 4px);
    opacity:.55;
    pointer-events:none;
}

.mk-contact-wave-top{
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:110px;
    pointer-events:none;
    z-index:2;
}

.mk-contact-wave-top svg{
    width:100%;
    height:100%;
    display:block;
}

.mk-contact .container{
    position:relative;
    z-index:3;
}

.mk-contact h2{
    color:#fff;
    font-weight:900;
    font-size:2.25rem;
    line-height:1.08;
    margin:0 0 18px 0;
    letter-spacing:.2px;
}

.mk-contact-info{
    margin-top:12px;
    color: rgba(255,255,255,.92);
    font-weight:650;
}

.mk-info-row{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin:12px 0;
}

.mk-info-row .bi{
    font-size:1.15rem;
    line-height:1;
    transform: translateY(2px);
    opacity:.95;
}

.mk-info-row .mk-info-text{
    line-height:1.35;
    font-size:.98rem;
}

.mk-phone-big{
    font-size:1.55rem;
    font-weight:900;
    letter-spacing:.3px;
    margin-top:6px;
}

.mk-contact a{
    color:#fff;
    text-decoration:none;
}

.mk-contact a:hover{
    text-decoration:underline;
}

.mk-form{
    background: rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    padding:14px;
    backdrop-filter: blur(8px);
}

.mk-form .form-control{
    height:44px;
    border-radius:6px;
    border:1px solid rgba(16,24,40,.18);
    background: rgba(255,255,255,.92);
    font-weight:650;
    font-size:.92rem;
    color:#1f2f44;
}

.mk-form textarea.form-control{
    height:auto;
    min-height:120px;
    resize:none;
    padding-top:.75rem;
}

.mk-send{
    width:100%;
    height:42px;
    border-radius:6px;
    border:1px solid rgba(16,24,40,.18);
    background: linear-gradient(180deg, #7db62c, #5f9b16);
    color:#fff;
    font-weight:900;
    font-size:.82rem;
    letter-spacing:.10rem;
}

.mk-send:hover{
    filter: brightness(.98);
    color:#fff;
}

.mk-cta-row{
    margin-top:10px;
    width:100%;
    min-height:44px;
    border-radius:6px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(16,24,40,.14);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    text-decoration:none;
    color:#1f2f44 !important;
    font-weight:800;
    font-size:.88rem;
}

.mk-cta-row .mk-cta-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.mk-cta-row .bi{
    color:#2b66b7;
}

.mk-cta-row:hover{
    text-decoration:none;
    filter: brightness(.99);
}

.mk-quality{
    background:#fff;
    padding:22px 0;
    text-align:center;
    border-top:1px solid rgba(16,24,40,.06);
}

.mk-quality p{
    margin:0;
    font-size:1.35rem;
    color:#2c3a4b;
    font-weight:650;
}

.mk-quality strong{
    color: var(--brand);
    font-weight:900;
}

.mk-footer{
    background:#0b3f66;
    color: rgba(255,255,255,.82);
    padding:26px 0 18px;
}

.mk-footer .mk-copy{
    text-align:center;
    font-size:.86rem;
    margin-bottom:10px;
    opacity:.9;
}

.mk-footer .mk-links{
    display:flex;
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
    font-size:.78rem;
    letter-spacing:.08rem;
    opacity:.85;
    text-transform:uppercase;
}

.mk-footer .mk-links a{
    color: rgba(255,255,255,.85);
    text-decoration:none;
}

.mk-footer .mk-links a:hover{
    text-decoration:underline;
}

.mk-to-top{
    position:fixed;
    right:14px;
    bottom:14px;
    width:34px;
    height:34px;
    border-radius:4px;
    border:1px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.14);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    z-index:1050;
    backdrop-filter: blur(6px);
}

.mk-to-top:hover{
    filter: brightness(1.05);
    color:#fff;
    text-decoration:none;
}

/* ================= MOBILE / TABLET ================= */
@media (max-width: 991.98px){
    :root{
        --nav-h: 72px;
        --hero-h: clamp(220px, 52vw, 360px);
        --h1: 2.1rem;
        --team-cut-h: 110px;
        --logos-fade: 34px;
        --logos-gap: 14px;
        --logo-box-h: 66px;
        --logo-img-h: 40px;
    }

    body{
        padding-top: var(--nav-h);
    }

    .mk-nav .container{
        flex-wrap:wrap;
        padding-top:6px;
        padding-bottom:6px;
    }

    .mk-nav .navbar-brand{
        padding:6px 0;
        margin-right:0;
        flex:0 0 auto;
    }

    .mk-nav .navbar-brand img{
        width:auto !important;
        height:50px;
        max-width:180px;
        max-height:none;
    }

    .mk-nav .navbar-toggler{
        margin-left:auto;
    }

    .mk-nav .navbar-collapse{
        width:100%;
        flex-basis:100%;
        align-items:stretch;
        min-height:auto;
        padding-top:10px;
        max-height: calc(100vh - var(--nav-h) - 12px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mk-nav .navbar-nav{
        width:100%;
        gap:6px;
        align-items:stretch;
        padding:6px 0 10px 0;
    }

    .mk-nav .navbar-nav.mx-auto{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .mk-nav .nav-item{
        width:100%;
    }

    .mk-nav .nav-link{
        line-height:1.2;
        padding:.8rem .85rem;
        width:100%;
        min-height:52px;
        justify-content:space-between;
        border-radius:14px;
    }

    .mk-nav .dropdown-menu{
        position: static !important;
        transform: none !important;
        float: none !important;
        width: 100% !important;
        margin: 6px 0 0 0 !important;
        border:0;
    }

    .mk-mega{
        min-width:100%;
        width:100%;
        max-width:100% !important;
        margin-top:6px;
        padding:12px;
        border-radius:18px;
        box-shadow:none;
        backdrop-filter:none;
        background:#f7fafe;
        border:1px solid rgba(16,24,40,.06);
        max-height: min(52vh, 420px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mk-mega-head{
        display:block;
        padding:0 2px 10px 2px;
        margin-bottom:10px;
    }

    .mk-mega-sub{
        margin-top:4px;
    }

    .mk-mega-grid{
        grid-template-columns:1fr;
        gap:8px;
        padding:0;
    }

    .mk-mega-link{
        padding:12px 10px;
        font-size:1rem;
        border-radius:12px;
        background:#fff;
        border:1px solid rgba(16,24,40,.05);
    }

    .mk-nav .navbar-collapse > .d-flex,
    .mk-nav .d-flex.align-items-center.py-2.py-lg-0{
        width:100%;
        margin-left:0;
        padding-left:0;
        padding-top:8px;
        padding-bottom:8px;
        flex:0 0 auto;
    }

    .mk-phone{
        width:100%;
        justify-content:center;
    }

    .team-card img{
        height:240px;
    }

    .intro{
        padding:26px 0 16px;
    }

    .intro .intro-line{
        top:110px;
        width: calc(100% - 24px);
    }

    .mk-contact{
        padding:54px 0 54px;
    }

    .mk-contact h2{
        font-size:1.75rem;
    }

    .mk-phone-big{
        font-size:1.35rem;
    }

    .hero-top img{
        object-position: 58% 0% !important;
    }
}

@media (max-width: 575.98px){
    :root{
        --nav-h: 68px;
    }

    .mk-nav .container{
        padding-left:12px;
        padding-right:12px;
    }

    .mk-nav .navbar-brand img{
        height:44px;
        max-width:150px;
    }

    .mk-nav .navbar-toggler{
        padding:.5rem .65rem;
        border-radius:14px;
    }

    .mk-nav .nav-link{
        font-size:1rem;
        padding:.75rem .8rem;
    }

    .mk-phone{
        font-size:.96rem;
        padding:.72rem 1rem;
    }

    .mk-mega-title{
        font-size:1rem;
    }

    .mk-mega-sub{
        font-size:.88rem;
    }

    .mk-mega-link{
        font-size:.96rem;
    }

    .logos-slide{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-card{
        min-height:auto;
        padding:16px 18px;
    }

    .cta-pill{
        width:100%;
        justify-content:center;
    }

    .mk-cta-row{
        font-size:.82rem;
    }
}