/* Security Section */
.security-niapay {
    padding: var(--space-3xl) 0;
    background: #050505;
    /* Black/Dark Background */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Add a subtle purple glow/gradient based on the user's reference */
.security-niapay::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle closest-side, rgba(108, 34, 158, 0.15), transparent);
    pointer-events: none;
}

.security-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

/* Visual Side */
.security-visual {
    position: relative;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.security-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.security-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease;
    transform: scale(1.15);
}

.security-image:hover {
    transform: scale(1.2);
}

/* Floating element decoration (abstract credit card or shield) */
.security-decoration {
    position: absolute;
    top: 10%;
    left: -10%;
    width: 60%;
    height: 35%;
    background: linear-gradient(135deg, #2a2a2a 0%, #000 100%);
    border-radius: 16px;
    border: 1px solid #333;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    z-index: 3;
    animation: float 6s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 2px;
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(-5deg);
    }

    50% {
        transform: translateY(-15px) rotate(-3deg);
    }

    100% {
        transform: translateY(0px) rotate(-5deg);
    }
}

/* Content Side */
.security-content {
    padding: var(--space-xl);
    z-index: 2;
}

.security-tag {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
    margin-bottom: var(--space-md);
}

.security-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: #fff;
}

.security-content p {
    font-size: 1.125rem;
    color: #a3a3a3;
    margin-bottom: var(--space-xl);
    max-width: 480px;
    line-height: 1.6;
}

.security-link {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 6px;
    transition: all 0.2s;
}

.security-link:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

.security-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.2s;
}

.security-link:hover::after {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 900px) {
    .security-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .security-content {
        order: -1;
        /* Text first on mobile? Or visual first? Usually visual first is cool, but text first reads better. Let's stick to default (Visual first) or text first. Klarna often does image then text. */
        order: 2;
    }

    .security-visual {
        order: 1;
        margin-bottom: var(--space-lg);
    }

    .security-image-wrapper {
        margin: 0 auto;
    }

    .security-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .security-decoration {
        left: -5%;
        width: 50%;
    }
}