/* =========================================================
   MK-DESIGN — MODERN SOFTWARE / TECHNOLOGY HOMEPAGE
   ========================================================= */

:root {
    --mk-bg: #07101d;
    --mk-bg-2: #0b1627;
    --mk-panel: rgba(17, 31, 52, 0.82);
    --mk-panel-soft: rgba(15, 28, 47, 0.60);
    --mk-border: rgba(255, 255, 255, 0.10);
    --mk-text: #f4f8ff;
    --mk-muted: #aab7ca;
    --mk-blue: #39a8ff;
    --mk-blue-2: #1777d2;
    --mk-cyan: #5de3ff;
    --mk-radius: 22px;
    --mk-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* ---------- GLOBAL ---------- */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.mk-home {
    margin-top: 0 !important;
    background:
        radial-gradient(circle at 15% 5%, rgba(37, 145, 255, 0.12), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(79, 213, 255, 0.08), transparent 25%),
        var(--mk-bg);
    color: var(--mk-text);
}

.mk-home h1,
.mk-home h2,
.mk-home h3,
.mk-home p,
.mk-home li {
    color: inherit;
}

.mk-home a {
    text-decoration: none;
}

.mk-section {
    padding: 110px 32px !important;
    margin: 0 !important;
}

.mk-section > * {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- HEADER ---------- */

body > .wp-site-blocks > header,
.wp-block-template-part:first-child {
    position: relative;
    z-index: 50;
}

.wp-block-template-part:first-child > .wp-block-group {
    background: rgba(6, 14, 25, 0.88);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.wp-block-template-part:first-child .wp-block-navigation-item__content {
    color: #e9f3ff !important;
    font-weight: 600;
    font-size: 15px;
    transition: color .2s ease, opacity .2s ease;
}

.wp-block-template-part:first-child .wp-block-navigation-item__content:hover {
    color: var(--mk-cyan) !important;
}

/* ---------- HERO ---------- */

.mk-hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    padding: 120px 32px 110px !important;
    display: flex;
    align-items: center;
    background:
        linear-gradient(120deg, rgba(5,12,22,.96), rgba(7,22,42,.90)),
        radial-gradient(circle at 80% 25%, rgba(44,149,255,.22), transparent 32%);
}

.mk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, black 55%, transparent);
}

.mk-hero::after {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    right: -240px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49,168,255,.25), rgba(49,168,255,0) 65%);
    filter: blur(18px);
    animation: mkGlow 7s ease-in-out infinite alternate;
}

@keyframes mkGlow {
    from { transform: translate3d(0,0,0) scale(1); opacity: .65; }
    to   { transform: translate3d(-35px,40px,0) scale(1.12); opacity: 1; }
}

.mk-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto !important;
}

.mk-eyebrow,
.mk-section-label {
    margin-bottom: 18px !important;
    font-size: 13px !important;
    line-height: 1.2;
    letter-spacing: .20em;
    font-weight: 800;
    color: var(--mk-cyan) !important;
}

.mk-hero-title {
    max-width: 950px;
    margin: 0 0 26px !important;
    font-size: clamp(46px, 6vw, 88px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em;
    color: #ffffff !important;
}

.mk-hero-subtitle {
    max-width: 800px;
    margin: 0 0 22px !important;
    font-size: clamp(26px, 3vw, 44px) !important;
    line-height: 1.12 !important;
    font-weight: 500;
    color: #dbe9f8 !important;
}

.mk-hero-text {
    max-width: 760px;
    margin: 0 0 38px !important;
    font-size: clamp(18px, 1.6vw, 23px) !important;
    line-height: 1.6;
    color: var(--mk-muted) !important;
}

.mk-hero-buttons {
    gap: 14px !important;
}

/* ---------- BUTTONS ---------- */

.mk-btn-primary .wp-block-button__link,
.mk-btn-secondary .wp-block-button__link {
    border-radius: 999px !important;
    padding: 14px 26px !important;
    font-weight: 700;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.mk-btn-primary .wp-block-button__link {
    background: linear-gradient(135deg, var(--mk-blue), var(--mk-blue-2)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 30px rgba(31, 140, 240, .28);
}

.mk-btn-primary .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(31, 140, 240, .38);
}

.mk-btn-secondary .wp-block-button__link {
    background: rgba(255,255,255,.04) !important;
    color: #eef7ff !important;
    border: 1px solid rgba(255,255,255,.18);
}

.mk-btn-secondary .wp-block-button__link:hover {
    transform: translateY(-2px);
    border-color: rgba(93,227,255,.55);
}

/* ---------- MARQUEE ---------- */

.mk-marquee {
    overflow: hidden;
    padding: 17px 24px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(17,31,52,.72);
}

.mk-marquee p {
    margin: 0 !important;
    text-align: center;
    font-size: 13px;
    letter-spacing: .12em;
    font-weight: 700;
    color: #9fc2e4 !important;
}

/* ---------- SECTION TITLES ---------- */

.mk-section-title {
    max-width: 850px;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
    color: #fff !important;
}

.mk-section-intro {
    max-width: 820px !important;
    margin: 0 auto 48px 0 !important;
    font-size: 19px !important;
    line-height: 1.65;
    color: var(--mk-muted) !important;
}

/* ---------- SOLUTIONS ---------- */

.mk-solutions {
    background:
        linear-gradient(180deg, #091422 0%, #0b1728 100%);
}

.mk-card-grid {
    gap: 18px !important;
    align-items: stretch !important;
}

.mk-solution-card {
    position: relative;
    min-height: 310px;
    padding: 30px !important;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background:
        linear-gradient(145deg, rgba(22,39,64,.92), rgba(12,24,41,.86));
    box-shadow: var(--mk-shadow);
    overflow: hidden;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.mk-solution-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49,168,255,.16), transparent 70%);
}

.mk-solution-card:hover {
    transform: translateY(-7px);
    border-color: rgba(93,227,255,.35);
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

.mk-card-number {
    margin: 0 0 60px !important;
    font-size: 13px !important;
    letter-spacing: .16em;
    font-weight: 800;
    color: var(--mk-cyan) !important;
}

.mk-solution-card h3 {
    margin-bottom: 14px !important;
    font-size: 24px !important;
    line-height: 1.18 !important;
    color: #fff !important;
}

.mk-solution-card p:last-child {
    margin-bottom: 0 !important;
    line-height: 1.65;
    color: var(--mk-muted) !important;
}

/* ---------- PROCESS ---------- */

.mk-process {
    background:
        radial-gradient(circle at 50% 0%, rgba(37,145,255,.10), transparent 35%),
        #07101d;
}

.mk-process-grid {
    margin-top: 50px !important;
    gap: 0 !important;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    overflow: hidden;
    background: rgba(13,26,44,.78);
}

.mk-process-grid > .wp-block-column {
    position: relative;
    padding: 34px 25px !important;
    border-right: 1px solid var(--mk-border);
}

.mk-process-grid > .wp-block-column:last-child {
    border-right: 0;
}

.mk-process-grid strong {
    display: inline-block;
    margin-bottom: 34px;
    font-size: 13px;
    color: var(--mk-cyan);
}

.mk-process-grid h3 {
    margin: 0 0 12px !important;
    font-size: 21px !important;
    color: #fff !important;
}

.mk-process-grid p {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mk-muted) !important;
}

/* ---------- INTEGRATION ---------- */

.mk-integration {
    background: linear-gradient(135deg, #0d1a2d, #0a1321);
}

.mk-integration .wp-block-columns {
    gap: 70px !important;
}

.mk-integration p:not(.mk-section-label) {
    font-size: 18px;
    line-height: 1.7;
    color: var(--mk-muted) !important;
}

.mk-tech-list {
    padding: 28px !important;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: rgba(255,255,255,.035);
}

.mk-tech-list ul {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.mk-tech-list li {
    position: relative;
    padding: 15px 0 15px 30px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #dbe9f7 !important;
}

.mk-tech-list li:last-child {
    border-bottom: 0;
}

.mk-tech-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 15px;
    color: var(--mk-cyan);
    font-weight: 800;
}

/* ---------- 3D ---------- */

.mk-3d {
    background: #0b1626;
}

.mk-3d-card {
    margin-top: 40px !important;
    overflow: hidden;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: rgba(255,255,255,.035);
    box-shadow: var(--mk-shadow);
}

.mk-3d-card .wp-block-media-text__media {
    height: 100%;
    min-height: 390px;
}

.mk-3d-card .wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
}

.mk-3d-card .wp-block-media-text__content {
    padding: 45px !important;
}

.mk-3d-card h3 {
    margin-top: 0 !important;
    font-size: 31px !important;
    color: #fff !important;
}

.mk-3d-card p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--mk-muted) !important;
}

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

.mk-cta {
    margin: 0 !important;
    padding: 100px 32px !important;
    text-align: center;
    background:
        radial-gradient(circle at 50% 20%, rgba(48,161,255,.22), transparent 42%),
        linear-gradient(180deg, #081321, #050b13);
    border-top: 1px solid rgba(255,255,255,.08);
}

.mk-cta > * {
    max-width: 850px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.mk-cta h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-size: clamp(36px, 4.5vw, 62px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
    color: #fff !important;
}

.mk-cta p {
    margin-bottom: 30px !important;
    font-size: 19px !important;
    color: var(--mk-muted) !important;
}

.mk-cta .wp-block-buttons {
    justify-content: center !important;
}

/* ---------- FOOTER ---------- */

.wp-block-template-part:last-child {
    margin-top: 0 !important;
}

.wp-block-template-part:last-child .big-sky__dummy-section {
    margin: 0 !important;
}

.wp-block-template-part:last-child .is-style-section-3 {
    background: #050b13 !important;
    color: #dbe9f7 !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

.wp-block-template-part:last-child .wp-block-site-title a,
.wp-block-template-part:last-child .wp-social-link a {
    color: #fff !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .mk-section {
        padding: 78px 22px !important;
    }

    .mk-hero {
        min-height: 620px;
        padding: 95px 22px 85px !important;
    }

    .mk-card-grid {
        flex-wrap: wrap !important;
    }

    .mk-card-grid > .wp-block-column {
        flex-basis: calc(50% - 10px) !important;
    }

    .mk-process-grid {
        flex-wrap: wrap !important;
    }

    .mk-process-grid > .wp-block-column {
        flex-basis: 50% !important;
        border-bottom: 1px solid var(--mk-border);
    }

    .mk-process-grid > .wp-block-column:nth-child(2n) {
        border-right: 0;
    }

    .mk-integration .wp-block-columns {
        gap: 35px !important;
    }
}

@media (max-width: 700px) {

    .wp-block-template-part:first-child > .wp-block-group {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .mk-hero {
        min-height: auto;
        padding-top: 85px !important;
    }

    .mk-hero-title {
        font-size: clamp(42px, 13vw, 60px) !important;
    }

    .mk-hero-subtitle {
        font-size: 27px !important;
    }

    .mk-hero-text {
        font-size: 18px !important;
    }

    .mk-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .mk-hero-buttons .wp-block-button,
    .mk-hero-buttons .wp-block-button__link {
        width: 100%;
        text-align: center;
    }

    .mk-marquee p {
        font-size: 11px;
        line-height: 1.8;
    }

    .mk-card-grid > .wp-block-column {
        flex-basis: 100% !important;
    }

    .mk-solution-card {
        min-height: auto;
    }

    .mk-card-number {
        margin-bottom: 35px !important;
    }

    .mk-process-grid > .wp-block-column {
        flex-basis: 100% !important;
        border-right: 0;
    }

    .mk-3d-card .wp-block-media-text__content {
        padding: 26px !important;
    }

    .mk-3d-card .wp-block-media-text__media,
    .mk-3d-card .wp-block-media-text__media img {
        min-height: 250px;
    }

    .mk-cta {
        padding: 75px 22px !important;
    }
}

/* =========================================================
   MK-DESIGN — ANIMATED HERO BACKGROUND
   ========================================================= */

.mk-hero {
    background:
        linear-gradient(
            90deg,
            rgba(3,10,18,.88) 0%,
            rgba(4,14,27,.64) 45%,
            rgba(4,14,27,.48) 100%
        ),
        url('/wp-content/uploads/2026/09/mk-design/tech-background.png')
        center center / cover no-repeat !important;
}

/* keep content above animation */
.mk-hero-inner {
    position: relative;
    z-index: 10;
}

/* animated light network layer */
.mk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        radial-gradient(circle at 18% 42%,
            rgba(93,227,255,.65) 0 2px,
            transparent 4px),
        radial-gradient(circle at 34% 53%,
            rgba(57,168,255,.58) 0 2px,
            transparent 4px),
        radial-gradient(circle at 62% 41%,
            rgba(93,227,255,.55) 0 2px,
            transparent 4px),
        radial-gradient(circle at 77% 32%,
            rgba(57,168,255,.65) 0 2px,
            transparent 4px);

    animation: mkNetworkPulse 5.5s ease-in-out infinite;
}

@keyframes mkNetworkPulse {
    0%,100% {
        opacity: .28;
        filter: brightness(.85);
    }

    50% {
        opacity: .95;
        filter: brightness(1.5);
    }
}

/* moving electric floor pulse */
.mk-hero::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: -25%;
    bottom: 8%;
    width: 32%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(57,168,255,.2),
        #5de3ff,
        #ffffff,
        #39a8ff,
        transparent
    );

    box-shadow:
        0 0 8px rgba(93,227,255,.9),
        0 0 18px rgba(57,168,255,.8),
        0 0 36px rgba(57,168,255,.35);

    transform: rotate(-7deg);
    opacity: 0;

    animation: mkElectricFloor 6.8s linear infinite;
}

@keyframes mkElectricFloor {
    0% {
        left: -35%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    46% {
        opacity: .95;
    }

    58% {
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

/* subtle server / electronics breathing glow */
.mk-hero {
    animation: mkHeroElectronics 8s ease-in-out infinite;
}

@keyframes mkHeroElectronics {
    0%,100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.035);
    }
}

/* animated scanning glow over monitor side */
.mk-hero .mk-hero-inner::before {
    content: "";
    position: absolute;
    z-index: -1;

    left: -13%;
    top: 5%;
    width: 34%;
    height: 80%;

    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(57,168,255,.04) 35%,
        rgba(93,227,255,.14) 50%,
        rgba(57,168,255,.04) 65%,
        transparent 100%
    );

    filter: blur(12px);
    opacity: .45;

    animation: mkMonitorScan 5s ease-in-out infinite;
}

@keyframes mkMonitorScan {
    0%,100% {
        transform: translateY(-9%);
        opacity: .20;
    }

    50% {
        transform: translateY(12%);
        opacity: .65;
    }
}

/* subtle globe glow */
.mk-hero .mk-hero-inner::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 310px;
    height: 310px;
    right: -12%;
    top: -8%;

    border-radius: 50%;
    border: 1px solid rgba(93,227,255,.10);

    box-shadow:
        inset 0 0 45px rgba(57,168,255,.08),
        0 0 45px rgba(57,168,255,.05);

    animation: mkGlobeGlow 11s linear infinite;
}

@keyframes mkGlobeGlow {
    from {
        transform: rotate(0deg) scale(.96);
        opacity: .25;
    }

    50% {
        opacity: .55;
    }

    to {
        transform: rotate(360deg) scale(.96);
        opacity: .25;
    }
}

/* reduce motion when requested */
@media (prefers-reduced-motion: reduce) {
    .mk-hero,
    .mk-hero::before,
    .mk-hero::after,
    .mk-hero .mk-hero-inner::before,
    .mk-hero .mk-hero-inner::after {
        animation: none !important;
    }
}

/* mobile simplification */
@media (max-width: 700px) {
    .mk-hero::after {
        animation-duration: 8.5s;
        opacity: .55;
    }

    .mk-hero .mk-hero-inner::after {
        display: none;
    }
}

/* =========================================================
   MK-DESIGN — HERO FINAL TUNING
   ========================================================= */

/* Mazāks header */
.wp-block-template-part:first-child > .wp-block-group {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.wp-block-template-part:first-child .wp-block-site-logo img {
    max-width: 82px !important;
    height: auto !important;
}

/* Hero ietilpst daudz labāk pirmajā ekrānā */
.mk-hero {
    min-height: 640px !important;
    padding: 72px 32px 68px !important;
}

/* Noņemam tēmas uzliktos pelēkos fonus */
.mk-hero .wp-block-heading,
.mk-hero p,
.mk-section .wp-block-heading,
.mk-section > p,
.mk-solution-card h3,
.mk-solution-card p,
.mk-process-grid h3,
.mk-process-grid p,
.mk-3d-card h3,
.mk-3d-card p,
.mk-cta h2,
.mk-cta p {
    background: transparent !important;
}

/* Hero saturs nedaudz šaurāks, lai fons paliek redzams */
.mk-hero-inner {
    max-width: 1180px !important;
}

/* Galvenais virsraksts */
.mk-hero-title {
    max-width: 900px !important;
    font-size: clamp(44px, 4.2vw, 67px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 20px !important;
}

/* Apakšvirsraksts */
.mk-hero-subtitle {
    max-width: 720px !important;
    font-size: clamp(25px, 2.2vw, 34px) !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
}

/* Apraksts */
.mk-hero-text {
    max-width: 690px !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
}

/* Augšējais mazais teksts */
.mk-eyebrow {
    display: inline-block;
    width: auto !important;
    padding: 7px 13px !important;
    margin-bottom: 17px !important;
    border: 1px solid rgba(93,227,255,.22);
    border-radius: 999px;
    background: rgba(5,18,34,.55) !important;
    backdrop-filter: blur(8px);
}

/* Pogas kompaktākas */
.mk-btn-primary .wp-block-button__link,
.mk-btn-secondary .wp-block-button__link {
    padding: 12px 24px !important;
    font-size: 15px !important;
}

/* Arī sadaļu virsraksti bija par lielu */
.mk-section-title {
    max-width: 780px !important;
    font-size: clamp(32px, 3.1vw, 48px) !important;
}

.mk-section-intro {
    font-size: 17px !important;
}

/* CTA arī nedaudz mierīgāks */
.mk-cta h2 {
    font-size: clamp(34px, 3.5vw, 52px) !important;
}

/* Mobilais */
@media (max-width: 700px) {
    .mk-hero {
        min-height: auto !important;
        padding: 60px 20px 62px !important;
    }

    .mk-hero-title {
        font-size: clamp(38px, 11vw, 52px) !important;
    }

    .mk-hero-subtitle {
        font-size: 25px !important;
    }

    .mk-hero-text {
        font-size: 17px !important;
    }
}

/* =========================================================
   MK-DESIGN — LIVE TECHNOLOGY LAYERS
   ========================================================= */

.mk-hero {
    isolation: isolate;
}

.mk-hero-visuals {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

/* -------------------------
   MONITOR CODE
   ------------------------- */

.mk-code-screen {
    position: absolute;
    left: 2.2%;
    top: 39%;
    width: 12%;
    height: 25%;
    overflow: hidden;

    opacity: .42;
    color: #62e7ff;

    font-family: Consolas, Monaco, monospace;
    font-size: clamp(6px, .55vw, 10px);
    line-height: 1.65;

    text-shadow: 0 0 7px rgba(65,210,255,.8);

    transform:
        perspective(550px)
        rotateY(11deg)
        rotateZ(-1deg);
}

.mk-code-screen span {
    display: block;
    white-space: nowrap;
}

.mk-code-screen-1 {
    animation: mkCodeScroll 8s linear infinite;
}

@keyframes mkCodeScroll {
    0% {
        transform:
            perspective(550px)
            rotateY(11deg)
            rotateZ(-1deg)
            translateY(40%);
    }

    100% {
        transform:
            perspective(550px)
            rotateY(11deg)
            rotateZ(-1deg)
            translateY(-45%);
    }
}

/* -------------------------
   CAMERA
   ------------------------- */

.mk-camera-live {
    position: absolute;
    left: 2.2%;
    top: 4%;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;

    opacity: .22;

    box-shadow:
        0 0 18px rgba(75,218,255,.25),
        0 0 45px rgba(45,160,255,.12);

    animation: mkCameraActive 5s ease-in-out infinite;
}

.mk-camera-live span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%,-50%);
    border-radius: 50%;

    background: #5de3ff;

    box-shadow:
        0 0 7px #5de3ff,
        0 0 16px #39a8ff;
}

@keyframes mkCameraActive {
    0%, 70%, 100% {
        opacity: .18;
    }

    75%, 87% {
        opacity: .72;
    }
}

/* -------------------------
   SERVER LEDS
   ------------------------- */

.mk-server-led {
    position: absolute;
    right: 4.1%;
    width: 4px;
    height: 4px;
    border-radius: 50%;

    background: #5de3ff;

    box-shadow:
        0 0 5px #5de3ff,
        0 0 11px #2b9fff;
}

.mk-led-1 {
    top: 17%;
    animation: mkLed 1.1s steps(1) infinite;
}

.mk-led-2 {
    top: 23%;
    animation: mkLed 1.65s steps(1) infinite .3s;
}

.mk-led-3 {
    top: 29%;
    animation: mkLed .85s steps(1) infinite .15s;
}

.mk-led-4 {
    top: 35%;
    animation: mkLed 2.1s steps(1) infinite .65s;
}

@keyframes mkLed {
    0%,40%,100% {
        opacity: .16;
    }

    45%,60% {
        opacity: 1;
    }
}

/* -------------------------
   CITY LIGHTS
   ------------------------- */

.mk-city-light {
    position: absolute;
    width: 5px;
    height: 7px;

    background: #ffd27a;
    border-radius: 1px;

    box-shadow: 0 0 7px rgba(255,190,92,.75);

    opacity: .05;
}

.mk-city-light-1 {
    left: 21%;
    top: 23%;
    animation: mkWindow 8s infinite;
}

.mk-city-light-2 {
    left: 24%;
    top: 30%;
    animation: mkWindow 11s infinite 2s;
}

.mk-city-light-3 {
    left: 27%;
    top: 19%;
    animation: mkWindow 9s infinite 5s;
}

.mk-city-light-4 {
    left: 29%;
    top: 34%;
    animation: mkWindow 13s infinite 1s;
}

@keyframes mkWindow {
    0%,20%,65%,100% {
        opacity: .04;
    }

    28%,52% {
        opacity: .9;
    }
}

/* -------------------------
   VEHICLE LIGHT MOVEMENT
   ------------------------- */

.mk-road-light {
    position: absolute;
    right: 23%;
    bottom: 18%;

    width: 7px;
    height: 5px;

    background: #eefaff;

    border-radius: 50%;

    box-shadow:
        0 0 8px #dff7ff,
        0 0 18px #39a8ff;

    opacity: 0;
}

.mk-road-light-1 {
    animation: mkVehicleApproach 10s linear infinite;
}

.mk-road-light-2 {
    animation: mkVehicleApproach 13s linear infinite 4.5s;
}

@keyframes mkVehicleApproach {
    0% {
        transform: translate(180px,-40px) scale(.25);
        opacity: 0;
    }

    15% {
        opacity: .35;
    }

    70% {
        opacity: .9;
    }

    100% {
        transform: translate(-130px,50px) scale(1.45);
        opacity: 0;
    }
}

/* -------------------------
   DATA / ELECTRIC PULSES
   ------------------------- */

.mk-data-pulse {
    position: absolute;

    width: 230px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #38a9ff,
        #a9f4ff,
        transparent
    );

    box-shadow:
        0 0 7px rgba(72,205,255,.9),
        0 0 18px rgba(45,160,255,.55);

    opacity: 0;
}

.mk-data-pulse-1 {
    bottom: 9%;
    left: -20%;
    transform: rotate(-5deg);
    animation: mkPulseAcross 7s linear infinite;
}

.mk-data-pulse-2 {
    bottom: 19%;
    left: -28%;
    transform: rotate(-10deg);
    animation: mkPulseAcross 10s linear infinite 3.5s;
}

@keyframes mkPulseAcross {
    0% {
        left: -25%;
        opacity: 0;
    }

    10% {
        opacity: .9;
    }

    62% {
        opacity: .85;
    }

    75% {
        opacity: 0;
    }

    100% {
        left: 110%;
        opacity: 0;
    }
}

/* -------------------------
   ACCESSIBILITY / MOBILE
   ------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mk-hero-visuals * {
        animation: none !important;
    }
}

@media (max-width: 700px) {
    .mk-code-screen,
    .mk-city-light,
    .mk-road-light {
        display: none;
    }

    .mk-server-led {
        opacity: .45;
    }
}

/* =========================================================
   MK-DESIGN — HERO VISUAL POSITION FIX
   Animācijas koordinātas pret visu hero laukumu
   ========================================================= */

.mk-hero {
    position: relative !important;
}

/* WordPress constrained layout nedrīkst sašaurināt efektu slāni */
.mk-hero > .mk-hero-visuals,
.mk-hero-visuals {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    margin: 0 !important;

    z-index: 4 !important;
    pointer-events: none !important;
    overflow: hidden !important;

    transform: none !important;
}

/* Teksta saturu turam virs animācijas */
.mk-hero-inner {
    position: relative !important;
    z-index: 10 !important;
}


/* =========================================================
   MONITORA KODS
   Kreisā monitora faktiskajā zonā
   ========================================================= */

.mk-code-screen {
    left: 3.2% !important;
    top: 47% !important;

    width: 10.5% !important;
    height: 26% !important;

    font-size: clamp(6px, .48vw, 9px) !important;
    line-height: 1.55 !important;

    opacity: .50 !important;

    transform:
        perspective(600px)
        rotateY(7deg)
        rotateZ(-1deg) !important;

    transform-origin: left center !important;
}

@keyframes mkCodeScroll {
    0% {
        transform:
            perspective(600px)
            rotateY(7deg)
            rotateZ(-1deg)
            translateY(28%);
    }

    100% {
        transform:
            perspective(600px)
            rotateY(7deg)
            rotateZ(-1deg)
            translateY(-55%);
    }
}


/* =========================================================
   KAMERA
   Kamera atrodas attēla kreisajā augšējā stūrī
   ========================================================= */

.mk-camera-live {
    left: 1.7% !important;
    top: 3.0% !important;

    width: 7.2% !important;
    max-width: 120px !important;

    opacity: .32 !important;
}


/* =========================================================
   SERVERU LED
   Pārvietojam uz serveru skapjiem labajā malā
   ========================================================= */

.mk-server-led {
    right: 2.15% !important;

    width: 4px !important;
    height: 4px !important;
}

.mk-led-1 {
    top: 17% !important;
}

.mk-led-2 {
    top: 22.5% !important;
}

.mk-led-3 {
    top: 28% !important;
}

.mk-led-4 {
    top: 33.5% !important;
}


/* =========================================================
   PILSĒTAS LOGU GAISMAS
   Pārvietojam uz ēkām aiz monitoriem
   ========================================================= */

.mk-city-light {
    width: 4px !important;
    height: 6px !important;
}

.mk-city-light-1 {
    left: 22.8% !important;
    top: 17% !important;
}

.mk-city-light-2 {
    left: 25.1% !important;
    top: 22% !important;
}

.mk-city-light-3 {
    left: 27.4% !important;
    top: 28% !important;
}

.mk-city-light-4 {
    left: 29.1% !important;
    top: 20% !important;
}


/* =========================================================
   TRANSPORTA GAISMAS
   Ceļa zonā pie kravas auto
   ========================================================= */

.mk-road-light {
    right: 19% !important;
    bottom: 15% !important;
}


/* =========================================================
   GRĪDAS DATU / ELEKTRĪBAS IMPULSI
   ========================================================= */

.mk-data-pulse-1 {
    bottom: 7% !important;
}

.mk-data-pulse-2 {
    bottom: 13% !important;
}


/* Mobilajā nerādām precīzi pozicionētos sīkos efektus */
@media (max-width: 700px) {
    .mk-code-screen,
    .mk-city-light,
    .mk-road-light,
    .mk-server-led {
        display: none !important;
    }
}

/* =========================================================
   MK-DESIGN — GLOBE / NETWORK / BARRIER ANIMATION
   ========================================================= */

/* -------------------------
   DIGITAL GLOBE
   ------------------------- */

.mk-globe-ring {
    position: absolute;
    right: 14.2%;
    top: 4.5%;

    width: 24vw;
    max-width: 420px;
    aspect-ratio: 1;

    border-radius: 50%;
    pointer-events: none;

    opacity: .22;
}

.mk-globe-ring-1 {
    border: 1px solid rgba(86,220,255,.35);

    box-shadow:
        inset 0 0 28px rgba(57,168,255,.08),
        0 0 18px rgba(57,168,255,.08);

    animation: mkGlobeRingRotate 34s linear infinite;
}

.mk-globe-ring-1::before,
.mk-globe-ring-1::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(93,227,255,.22);
}

.mk-globe-ring-1::after {
    inset: 30%;
}

.mk-globe-ring-2 {
    border-top: 1px solid rgba(93,227,255,.55);
    border-right: 1px solid transparent;
    border-bottom: 1px solid rgba(57,168,255,.12);
    border-left: 1px solid transparent;

    transform: rotate(28deg);
    animation: mkGlobeRingRotateReverse 24s linear infinite;
}

@keyframes mkGlobeRingRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes mkGlobeRingRotateReverse {
    from { transform: rotate(28deg); }
    to   { transform: rotate(-332deg); }
}

/* moving glowing nodes around globe */

.mk-globe-dot {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #7cecff;

    box-shadow:
        0 0 6px #7cecff,
        0 0 15px rgba(57,168,255,.9);

    z-index: 5;
}

.mk-globe-dot-1 {
    right: 22.5%;
    top: 12%;
    animation: mkGlobeDotPulse 3.4s ease-in-out infinite;
}

.mk-globe-dot-2 {
    right: 17.5%;
    top: 24%;
    animation: mkGlobeDotPulse 4.7s ease-in-out infinite 1.2s;
}

.mk-globe-dot-3 {
    right: 28%;
    top: 31%;
    animation: mkGlobeDotPulse 5.2s ease-in-out infinite 2.1s;
}

@keyframes mkGlobeDotPulse {
    0%,100% {
        opacity: .18;
        transform: scale(.7);
    }

    45% {
        opacity: 1;
        transform: scale(1.35);
    }
}


/* -------------------------
   NETWORK DATA FLOW
   ------------------------- */

.mk-network-flow {
    position: absolute;

    height: 2px;
    width: 180px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(93,227,255,.25),
        #aaf6ff,
        rgba(57,168,255,.5),
        transparent
    );

    box-shadow:
        0 0 8px rgba(93,227,255,.65),
        0 0 18px rgba(57,168,255,.3);

    opacity: 0;
}

.mk-network-flow-1 {
    right: 31%;
    top: 35%;
    transform: rotate(-18deg);

    animation: mkNetworkFlowA 7.5s linear infinite;
}

.mk-network-flow-2 {
    right: 16%;
    top: 46%;
    transform: rotate(21deg);

    animation: mkNetworkFlowB 9s linear infinite 2.8s;
}

@keyframes mkNetworkFlowA {
    0% {
        transform: translate(-180px,80px) rotate(-18deg);
        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    70% {
        opacity: .7;
    }

    100% {
        transform: translate(160px,-55px) rotate(-18deg);
        opacity: 0;
    }
}

@keyframes mkNetworkFlowB {
    0% {
        transform: translate(-130px,-70px) rotate(21deg);
        opacity: 0;
    }

    15% {
        opacity: .75;
    }

    75% {
        opacity: .6;
    }

    100% {
        transform: translate(190px,70px) rotate(21deg);
        opacity: 0;
    }
}


/* -------------------------
   BARRIER / ACCESS CONTROL
   ------------------------- */

.mk-barrier-scan {
    position: absolute;

    right: 5.2%;
    bottom: 20%;

    width: 13%;
    height: 34%;

    border-left: 1px solid rgba(93,227,255,.14);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(57,168,255,.035),
        rgba(93,227,255,.13),
        transparent
    );

    opacity: 0;

    transform: skewX(-5deg);

    animation: mkBarrierScan 7s ease-in-out infinite 1.5s;
}

@keyframes mkBarrierScan {
    0%,100% {
        transform: translateX(-55px) skewX(-5deg);
        opacity: 0;
    }

    30% {
        opacity: .6;
    }

    55% {
        transform: translateX(25px) skewX(-5deg);
        opacity: .85;
    }

    75% {
        opacity: 0;
    }
}

.mk-barrier-light {
    position: absolute;

    right: 8.6%;
    bottom: 22%;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #5de3ff;

    box-shadow:
        0 0 7px #5de3ff,
        0 0 18px #39a8ff,
        0 0 35px rgba(57,168,255,.45);

    animation: mkBarrierLight 5s steps(1) infinite;
}

@keyframes mkBarrierLight {
    0%,55%,100% {
        opacity: .18;
    }

    60%,74% {
        opacity: 1;
    }
}


/* mobile */
@media (max-width: 700px) {
    .mk-globe-ring,
    .mk-globe-dot,
    .mk-network-flow,
    .mk-barrier-scan,
    .mk-barrier-light {
        display: none !important;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mk-globe-ring,
    .mk-globe-dot,
    .mk-network-flow,
    .mk-barrier-scan,
    .mk-barrier-light {
        animation: none !important;
    }
}