.feature-card {
    position: relative;
    overflow: hidden;

    background: var(--surface-container, #151515);

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;

    padding: 1.5rem;

    min-height: 210px;

    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 500ms ease,
        box-shadow 500ms ease;

    isolation: isolate;
}


.feature-card:hover {
    transform: translateY(-8px);

    border-color: rgba(37, 211, 102, 0.35);

    box-shadow:
        0 20px 50px rgba(37, 211, 102, 0.10);
}


.spotlight {
    position: absolute;

    width: 260px;
    height: 260px;

    left: 0;
    top: 0;

    transform: translate(-50%, -50%);

    border-radius: 9999px;

    background: rgba(37, 211, 102, 0.16);

    filter: blur(60px);

    opacity: 0;

    pointer-events: none;

    transition: opacity 300ms ease;

    z-index: -1;
}


.feature-card-content {
    position: relative;
    z-index: 2;
}


.feature-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 0.75rem;

    background: rgba(255, 255, 255, 0.04);

    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        background 400ms ease;
}


.feature-icon .material-symbols-outlined {
    color: var(--primary, #25d366);

    font-size: 24px;

    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}


.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-3deg);

    background: rgba(37, 211, 102, 0.10);
}


.feature-card:hover .feature-icon .material-symbols-outlined {
    transform: scale(1.12);
}


.feature-title {
    margin-bottom: 0.5rem;

    color: var(--on-surface, #ffffff);

    transition:
        color 300ms ease,
        transform 400ms ease;
}


.feature-card:hover .feature-title {
    color: var(--primary, #25d366);

    transform: translateX(3px);
}


.feature-description {
    color: var(--on-surface-variant, #a1a1aa);

    transition:
        transform 400ms ease,
        opacity 400ms ease;
}


.feature-card:hover .feature-description {
    transform: translateX(3px);
}


@media (max-width: 768px) {

    .feature-card {
        min-height: auto;
    }

    /*
       Disable cursor spotlight on touch devices.
       Keep the card lift disabled because there
       is no real hover state on mobile.
    */

    .feature-card:hover {
        transform: none;
    }

    .spotlight {
        display: none;
    }

}


.animated-border {
    position: relative;
    isolation: isolate;
}


/* Rotating green border */

.animated-border::before {
    content: "";

    position: absolute;
    inset: -2px;

    border-radius: 34px;

    background: conic-gradient(from 0deg,
            transparent 0deg,
            transparent 250deg,
            rgba(37, 211, 102, 0.9) 275deg,
            rgba(37, 211, 102, 0.9) 300deg,
            rgba(37, 211, 102, 0.9) 325deg,
            rgba(37, 211, 102, 0.9) 350deg,
            transparent 360deg);

    animation: rotateBorder 6s linear infinite;

    z-index: -2;
}


/* Creates the actual border thickness */

.animated-border::after {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: 30px;

    background: #0b0f0d;

    z-index: -1;
}


/* Smooth clockwise rotation */

@keyframes rotateBorder {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* =========================================================
   NEXCHAT HERO — CONVERSATION EFFECT
   ========================================================= */
/* =========================================================
   NEXCHAT HERO — CONVERSATION EFFECT
   ========================================================= */

.hero-conversation {
    perspective: 1200px;
}


/* =========================================================
   MAIN CONVERSATION CARD
   ========================================================= */

.conversation-card {
    position: relative;

    transform:
        rotateY(-4deg) rotateX(2deg);

    transition:
        transform 700ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 700ms ease;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .45),
        0 0 80px rgba(37, 211, 102, .06);
}


.hero-conversation:hover .conversation-card {
    transform:
        rotateY(0deg) rotateX(0deg) translateY(-4px);

    box-shadow:
        0 40px 120px rgba(0, 0, 0, .5),
        0 0 100px rgba(37, 211, 102, .10);
}


/* =========================================================
   MESSAGE BUBBLES
   ========================================================= */

.message-bubble {
    padding: 10px 14px;

    border-radius: 16px;

    font-size: 11px;
    line-height: 1.4;

    position: relative;
}


/* Customer */

.incoming-bubble {
    background: rgba(255, 255, 255, .055);

    border: 1px solid rgba(255, 255, 255, .06);

    border-bottom-left-radius: 5px;

    color: rgba(255, 255, 255, .8);
}


/* NexChat */

.outgoing-bubble {
    background: rgba(37, 211, 102, .12);

    border: 1px solid rgba(37, 211, 102, .14);

    border-bottom-right-radius: 5px;

    color: rgba(255, 255, 255, .88);
}


/* =========================================================
   MESSAGE TIMELINE
   ========================================================= */

/*
    TIMELINE

    0.0s  → Customer message
    1.0s  → NexChat response
    2.0s  → Automation
    3.0s  → Lead qualified
    3.5s  → Agent assigned
    4.0s  → Follow-up scheduled
    6.5s  → Fade out
    8.0s  → Restart
*/


/* IMPORTANT:
   Keep both messages hidden before animation begins.
*/

.message-row.incoming,
.message-row.outgoing {
    opacity: 0;
}


/* Customer appears first */

.message-row.incoming {
    animation:
        customerMessage 8s ease-in-out infinite;
}


/* NexChat appears after customer */

.message-row.outgoing {
    animation:
        nexchatResponse 8s 1s ease-in-out infinite;
}


/* =========================================================
   CUSTOMER MESSAGE ANIMATION
   ========================================================= */

@keyframes customerMessage {

    /* Start hidden */

    0% {
        opacity: 0;

        transform:
            translateY(15px) scale(.96);
    }


    /* Appear */

    5% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


    /* Stay visible */

    68% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


    /* Fade away */

    78% {
        opacity: 0;

        transform:
            translateY(-8px) scale(.98);
    }


    /* Reset */

    100% {
        opacity: 0;

        transform:
            translateY(15px) scale(.96);
    }
}


/* =========================================================
   NEXCHAT RESPONSE ANIMATION
   ========================================================= */

@keyframes nexchatResponse {

    /* Hidden */

    0% {
        opacity: 0;

        transform:
            translateY(15px) scale(.96);
    }


    /* Stay hidden briefly */

    3% {
        opacity: 0;

        transform:
            translateY(15px) scale(.96);
    }


    /* Appear */

    10% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


    /* Stay visible */

    66% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


    /* Fade */

    78% {
        opacity: 0;

        transform:
            translateY(-8px) scale(.98);
    }


    /* Reset */

    100% {
        opacity: 0;

        transform:
            translateY(15px) scale(.96);
    }
}


/* =========================================================
   AUTOMATION EVENT
   ========================================================= */

.automation-event {
    position: relative;

    padding: 11px 12px;

    border-radius: 15px;

    background:
        linear-gradient(90deg,
            rgba(37, 211, 102, .10),
            rgba(37, 211, 102, .025));

    border: 1px solid rgba(37, 211, 102, .12);

    opacity: 0;

    animation:
        automationInOut 8s 2s ease-in-out infinite;
}


/* =========================================================
   AUTOMATION ANIMATION
   ========================================================= */

@keyframes automationInOut {

    /* Hidden */

    0% {
        opacity: 0;

        transform:
            translateY(12px) scale(.96);
    }


    /* Appear */

    10% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


    /* Stay */

    65% {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


    /* Fade */

    78% {
        opacity: 0;

        transform:
            translateY(-8px) scale(.98);
    }


    /* Reset */

    100% {
        opacity: 0;

        transform:
            translateY(12px) scale(.96);
    }
}


/* =========================================================
   AUTOMATION ICON
   ========================================================= */

.automation-icon {
    width: 31px;
    height: 31px;

    border-radius: 10px;

    background: rgba(37, 211, 102, .15);

    color: #25d366;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    animation:
        automationIconPulse 1.8s ease-in-out infinite;
}


@keyframes automationIconPulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 rgba(37, 211, 102, 0);
    }

    50% {
        transform: scale(1.08);

        box-shadow:
            0 0 22px rgba(37, 211, 102, .25);
    }
}


/* =========================================================
   SYSTEM EVENTS
   ========================================================= */

.system-event {
    display: flex;

    align-items: center;

    gap: 11px;

    opacity: 0;

    animation:
        systemEvent 8s ease-in-out infinite;
}


/* Lead qualified */

.system-event:nth-child(1) {
    animation-delay: 3s;
}


/* Agent assigned */

.system-event:nth-child(2) {
    animation-delay: 3.5s;
}


/* Follow-up scheduled */

.system-event:nth-child(3) {
    animation-delay: 4s;
}


/* =========================================================
   SYSTEM EVENT ANIMATION
   ========================================================= */

@keyframes systemEvent {

    /* Hidden */

    0% {
        opacity: 0;

        transform:
            translateX(-12px);
    }


    /* Appear */

    8% {
        opacity: 1;

        transform:
            translateX(0);
    }


    /* Stay */

    65% {
        opacity: 1;

        transform:
            translateX(0);
    }


    /* Fade */

    78% {
        opacity: 0;

        transform:
            translateX(8px);
    }


    /* Reset */

    100% {
        opacity: 0;

        transform:
            translateX(-12px);
    }
}


/* =========================================================
   CHECK / SYSTEM ICON
   ========================================================= */

.check-icon {
    width: 25px;
    height: 25px;

    border-radius: 8px;

    display: grid;
    place-items: center;

    color: #25d366;

    background: rgba(37, 211, 102, .08);

    border: 1px solid rgba(37, 211, 102, .10);

    flex-shrink: 0;
}


/* =========================================================
   FLOATING METRIC CARDS
   ========================================================= */

.metric-float {
    animation:
        metricFloat 5s ease-in-out infinite;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .35),
        0 0 35px rgba(37, 211, 102, .04);
}


/* Top-right */

.metric-one {
    animation-delay: -.5s;
}


/* Left */

.metric-two {
    animation-delay: -2s;
}


/* Bottom-right */

.metric-three {
    animation-delay: -3.5s;
}


/* =========================================================
   FLOATING METRIC ANIMATION
   ========================================================= */

@keyframes metricFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }
}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

.conversation-orbit {
    animation:
        orbitRotate 18s linear infinite;
}


.conversation-orbit-reverse {
    animation:
        orbitRotate 25s linear infinite reverse;
}


@keyframes orbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   FLOATING PARTICLES
   ========================================================= */

.particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #25d366;

    box-shadow:
        0 0 12px rgba(37, 211, 102, .7);

    opacity: .45;

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


/* Particle positions */

.particle-1 {
    top: 15%;
    left: 8%;
}


.particle-2 {
    top: 35%;
    right: 4%;

    animation-delay: -1s;
}


.particle-3 {
    bottom: 22%;
    left: 5%;

    animation-delay: -2.5s;
}


.particle-4 {
    bottom: 8%;
    right: 20%;

    animation-delay: -4s;
}


/* =========================================================
   PARTICLE ANIMATION
   ========================================================= */

@keyframes particleFloat {

    0%,
    100% {
        transform:
            translate(0, 0);

        opacity: .25;
    }

    50% {
        transform:
            translate(8px, -14px);

        opacity: .8;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .conversation-card {
        transform: none;
    }

    .hero-conversation {
        margin-top: 20px;
    }

}