/* General Utils */
.cursor-pointer {
cursor: pointer;
}
.transition-all {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Feature List Styling */
.feature-item {
border: 1px solid transparent;
background: transparent;
}
.feature-item:hover {
background: #f8f9fa;
}
.feature-item.active {
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.03);
}

/* Marker Logic */
.feature-marker {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.marker-circle {
width: 24px;
height: 24px;
border-radius: 50%;
background: #e2e8f0;
transition: all 0.3s ease;
flex-shrink: 0;
position: relative;
}
.marker-circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
}
.feature-item.active .marker-circle {
background: #ff990b;
box-shadow: 0 0 0 4px rgba(255, 153, 11, 0.2);
}
.feature-title {
color: #334155;
transition: color 0.3s;
}
.feature-item.active .feature-title {
color: #ff990b;
}

/* Phone Frame (CSS Only iPhone-ish) */
.phone-wrapper {
position: relative;
width: 280px;
height: 560px;
z-index: 2;
}
.phone-frame {
position: relative;
width: 100%;
height: 100%;
background: #1e293b;
border-radius: 36px;
border: 8px solid #1e293b;
overflow: hidden;
box-shadow:
    inset 0 0 0 2px #334155,
    0 20px 40px rgba(0, 0, 0, 0.2);
}
.phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 20px;
background: #1e293b;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
z-index: 10;
}
.phone-screen {
width: 100%;
height: 100%;
background: transparent;
border-radius: 28px;
overflow: hidden;
position: relative;
padding-top: 20px;
box-sizing: border-box;
}

/* Screen Content Transition */
.screen-content {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-position: top center;
background-repeat: no-repeat;
transition: opacity 0.4s ease-in-out;
}

/* Animation Class */
.fade-swap {
animation: fadeSwap 0.4s ease-in-out;
}

@keyframes fadeSwap {
0% {
    opacity: 0.4;
    transform: scale(1.02);
}
100% {
    opacity: 1;
    transform: scale(1);
}
}

/* Decor Blob */
.decor-blob {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 80%;
background: var(--theme-color);
opacity: 0.15;
filter: blur(60px);
z-index: -1;
border-radius: 50%;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .phone-wrapper {
        width: 240px;
        height: 480px;
    }
}

@media (max-width: 767px) {
    .phone-wrapper {
        width: 220px;
        height: 440px;
    }
    .phone-screen {
        padding-top: 18px;
    }
    .phone-notch {
        width: 70px;
        height: 18px;
    }
}

@media (max-width: 575px) {
    .phone-wrapper {
        width: 200px;
        height: 400px;
    }
    .phone-screen {
        padding-top: 16px;
    }
    .phone-notch {
        width: 60px;
        height: 15px;
    }
}