/* วงกลมพื้นหลังส่วนต้อนรับ */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.blob-one {
    top: 80px;
    left: -150px;
    width: 360px;
    height: 360px;
    background: rgba(208, 173, 59, 0.08);
}

.blob-two {
    right: -100px;
    bottom: -160px;
    width: 430px;
    height: 430px;
    border: 90px solid rgba(204, 146, 0, 0.05);
}

/* การ์ดข้อมูลที่ลอยอยู่บนภาพ */
.floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(65, 50, 10, 0.17);
    animation: float-card 4s ease-in-out infinite;
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    color: #624600;
    font-size: 13px;
}

.floating-card small {
    color: #718077;
    font-size: 13px;
}

.floating-icon {
    display: grid;
    width: 38px;
    height: 38px;
    color: #cc9200;
    background: #f8f5e8;
    border-radius: 10px;
    place-items: center;
    font-weight: 800;
}

.account-card {
    top: 48px;
    right: -35px;
}

.law-card {
    top: 205px;
    right: -18px;
    animation-delay: 1.4s;
}

.support-card {
    right: -30px;
    bottom: 42px;
    animation-delay: 2.4s;
}

/* จุดสีเขียวใช้แทนใบไม้เล็ก ๆ */
.leaf {
    position: absolute;
    z-index: 4;
    color: #cbb97b;
    font-size: 23px;
    animation: leaf-move 5s ease-in-out infinite;
}

.leaf-one {
    top: -22px;
    left: 20px;
}

.leaf-two {
    right: 40px;
    bottom: -25px;
    animation-delay: 1.2s;
}


/* การเคลื่อนไหวของส่วนตกแต่ง */
@keyframes float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes leaf-move {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-12px) rotate(12deg); }
}

@media (max-width: 900px) {
    .account-card {
        right: 10px;
    }

    .law-card {
        right: 25px;
    }

    .support-card {
        right: 12px;
    }

}

@media (max-width: 620px) {
    .floating-card {
        min-width: 230px;
        padding: 11px 13px;
    }

    .account-card {
        top: 18px;
        right: -5px;
    }

    .law-card {
        top: 145px;
        right: 5px;
    }

    .support-card {
        right: 5px;
        bottom: 18px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .floating-card,
    .leaf {
        animation: none;
    }
}