/* CSS Variables */
:root {
    --primary: #ff0283;
    --primary-hover: #e60275;
    --dark: #1a1a2e;
    --light: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-400: #999;
    --gray-600: #666;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--dark);
    background: var(--light);
    line-height: 1.6;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4rem;
    background: var(--light);
    z-index: 1000;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.nav-account {
    font-weight: 500;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark);
    transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--light);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 2rem;
}

.mobile-menu-content a {
    text-decoration: none;
    color: var(--dark);
    font-size: 1.5rem;
    font-weight: 500;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 2rem;
    background: var(--light);
    position: relative;
    overflow: visible;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 2, 131, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 50%, rgba(255, 2, 131, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 0% 50%, rgba(255, 2, 131, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    max-width: 800px;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--dark);
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
}

/* Typing Animation */
.typing-headline {
    min-height: 2.5em;
}

.typing-text {
    display: inline;
    white-space: pre-line;
    word-break: break-word;
    overflow-wrap: break-word;
}

.typing-cursor {
    display: inline-block;
    color: var(--primary);
    font-weight: 300;
    animation: blink-cursor 0.8s step-end infinite;
    margin-left: 2px;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--gray-600);
    margin-bottom: 3.5rem;
    font-weight: 400;
}

.cta-button {
    display: inline-block;
    background: var(--primary);
    color: white;
    text-decoration: none;
    padding: 1.1rem 3rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 2, 131, 0.3);
}

.cta-button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 2, 131, 0.4);
}

/* Falling Carts */
.falling-carts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.falling-cart {
    position: absolute;
    top: -100px;
    opacity: 0.25;
    animation: fallDown linear forwards;
    transform: rotate(var(--rotation, 0deg));
}

.falling-cart.wobble {
    animation: fallDown linear forwards, wobbleCart 2s ease-in-out infinite;
}

.falling-cart svg {
    width: 100%;
    height: auto;
}

@keyframes fallDown {
    0% {
        top: -100px;
        opacity: 0;
    }
    5% {
        opacity: 0.25;
    }
    90% {
        opacity: 0.25;
    }
    100% {
        top: 110vh;
        opacity: 0;
    }
}

@keyframes wobbleCart {
    0%, 100% {
        transform: rotate(var(--rotation, 0deg)) translateX(0);
    }
    25% {
        transform: rotate(calc(var(--rotation, 0deg) + 8deg)) translateX(10px);
    }
    75% {
        transform: rotate(calc(var(--rotation, 0deg) - 8deg)) translateX(-10px);
    }
}

/* Collector (Money Bag) */
.collector {
    position: absolute;
    bottom: -33px;
    left: 50%;
    width: 233px;
    height: 233px;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 8px 30px rgba(255, 2, 131, 0.25));
    will-change: transform;
    margin-left: -116px;
}

@media (max-width: 1400px) {
    .collector {
        width: 187px;
        height: 187px;
        bottom: -23px;
        margin-left: -93px;
    }
}

@media (max-width: 1200px) {
    .collector {
        width: 147px;
        height: 147px;
        bottom: -20px;
        margin-left: -73px;
    }
}

@media (max-width: 992px) {
    .collector {
        width: 120px;
        height: 120px;
        bottom: -17px;
        margin-left: -60px;
    }
}

@media (max-width: 576px) {
    .collector {
        width: 67px;
        height: 67px;
        bottom: -7px;
        margin-left: -33px;
    }
}

.collector svg {
    width: 100%;
    height: 100%;
}

/* Money Counter */
.money-counter {
    position: absolute;
    top: clamp(4.5rem, 8vw, 6rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.4s ease-out;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.money-counter.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

.money-value {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 700;
    color: #22c55e;
    transition: transform 0.2s ease;
}

.money-value.money-pop {
    transform: scale(1.2);
}

.money-label {
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    color: var(--gray-600);
    font-weight: 500;
}

/* Collected cart animation */
.falling-cart.collected {
    animation: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

/* Money tag floating animation */
.money-tag {
    position: fixed;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    background: #22c55e;
    padding: 8px 16px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 9999;
    animation: floatUp 1.5s ease-out forwards;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100px) scale(0.8);
    }
}


/* Trust Logos */
.trust-logos {
    padding: 3rem 2rem;
    background: var(--light);
    border-top: 1px solid var(--gray-200);
}

.logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-item {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-400);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.logo-item:hover {
    opacity: 1;
}

/* How It Works Section */
.how-it-works {
    padding: 6rem 2rem 8rem;
    background: var(--dark);
    position: relative;
    overflow: hidden;
}

.how-header {
    text-align: center;
    margin-bottom: 4rem;
}

.how-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: white;
    margin-bottom: 1rem;
}

.how-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Wide Flow Animation */
.flow-animation-wide {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    height: 500px;
}

.flow-lines-wide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.connection-line {
    stroke-dasharray: 6 4;
    animation: dashFlow 1s linear infinite;
}

.line-left {
    animation-direction: normal;
}

.line-right {
    animation-name: dashFlowRight;
}

@keyframes dashFlowRight {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -20;
    }
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -20;
    }
}

/* Carts Cloud */
.carts-cloud {
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    z-index: 2;
}

.carts-left {
    left: 0;
}

.carts-right {
    right: 0;
}

.mini-cart {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatCart 4s ease-in-out infinite;
    animation-delay: var(--delay);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.mini-cart:hover {
    transform: scale(1.15);
    z-index: 10;
}

.mini-cart svg {
    width: 50%;
    height: 50%;
    color: var(--dark);
}

.mini-cart.abandoned {
    box-shadow: 0 4px 25px rgba(255, 2, 131, 0.4);
}

.mini-cart.recovered {
    box-shadow: 0 4px 25px rgba(34, 197, 94, 0.4);
}

@keyframes floatCart {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(2deg); }
    75% { transform: translateY(5px) rotate(-2deg); }
}

.mini-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.65rem;
}

.mini-badge.abandoned {
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

.mini-badge.recovered {
    background: #22c55e;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

.cloud-label {
    position: absolute;
    bottom: -30px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.abandoned-label {
    left: 10%;
    color: var(--primary);
}

.recovered-label {
    right: 10%;
    color: #22c55e;
}

/* Center Hub */
.callfy-hub-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.hub-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 2, 131, 0.3) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.hub-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--primary);
}

.hub-ring.ring-1 {
    width: 180px;
    height: 180px;
    opacity: 0.2;
    animation: ringPulse 3s ease-in-out infinite;
}

.hub-ring.ring-2 {
    width: 140px;
    height: 140px;
    opacity: 0.4;
    animation: ringPulse 3s ease-in-out infinite 0.5s;
}

.hub-ring.ring-3 {
    width: 100px;
    height: 100px;
    opacity: 0.6;
    animation: ringPulse 3s ease-in-out infinite 1s;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

.hub-center {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, #c9006a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    z-index: 3;
    box-shadow: 0 8px 40px rgba(255, 2, 131, 0.5);
}

.hub-center svg {
    width: 35px;
    height: 35px;
}

/* Chat Bubbles */
.chat-bubble {
    position: absolute;
    background: white;
    color: var(--dark);
    padding: 12px 20px;
    border-radius: 22px;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    z-index: 4;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Bubble positions - alternating left (Callfy) and right (Customer) */
/* Odd bubbles = Callfy (left, pink) */
/* Even bubbles = Customer (right, white/green) */

.bubble-1, .bubble-3, .bubble-5, .bubble-7 {
    left: -160px;
    background: var(--primary);
    color: white;
}
.bubble-1::after, .bubble-3::after, .bubble-5::after, .bubble-7::after {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--primary);
}

.bubble-2, .bubble-4, .bubble-6 {
    right: -160px;
    background: white;
    color: var(--dark);
}
.bubble-2::after, .bubble-4::after, .bubble-6::after {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: white;
}

.bubble-8 {
    right: -160px;
    background: #22c55e;
    color: white;
}
.bubble-8::after {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #22c55e;
}

/* Vertical positions */
.bubble-1 { top: -70px; }
.bubble-2 { top: -35px; }
.bubble-3 { top: 0px; }
.bubble-4 { top: 35px; }
.bubble-5 { top: 70px; }
.bubble-6 { top: 105px; }
.bubble-7 { top: 140px; }
.bubble-8 { top: 175px; }

/* Session 1 animations (0s - 10s in a 30s cycle) */
.session-1.bubble-1 { animation: s1b1 30s ease-in-out infinite; }
.session-1.bubble-2 { animation: s1b2 30s ease-in-out infinite; }
.session-1.bubble-3 { animation: s1b3 30s ease-in-out infinite; }
.session-1.bubble-4 { animation: s1b4 30s ease-in-out infinite; }
.session-1.bubble-5 { animation: s1b5 30s ease-in-out infinite; }
.session-1.bubble-6 { animation: s1b6 30s ease-in-out infinite; }
.session-1.bubble-7 { animation: s1b7 30s ease-in-out infinite; }
.session-1.bubble-8 { animation: s1b8 30s ease-in-out infinite; }

/* Session 2 animations (10s - 20s) */
.session-2.bubble-1 { animation: s2b1 30s ease-in-out infinite; }
.session-2.bubble-2 { animation: s2b2 30s ease-in-out infinite; }
.session-2.bubble-3 { animation: s2b3 30s ease-in-out infinite; }
.session-2.bubble-4 { animation: s2b4 30s ease-in-out infinite; }
.session-2.bubble-5 { animation: s2b5 30s ease-in-out infinite; }
.session-2.bubble-6 { animation: s2b6 30s ease-in-out infinite; }
.session-2.bubble-7 { animation: s2b7 30s ease-in-out infinite; }
.session-2.bubble-8 { animation: s2b8 30s ease-in-out infinite; }

/* Session 3 animations (20s - 30s) */
.session-3.bubble-1 { animation: s3b1 30s ease-in-out infinite; }
.session-3.bubble-2 { animation: s3b2 30s ease-in-out infinite; }
.session-3.bubble-3 { animation: s3b3 30s ease-in-out infinite; }
.session-3.bubble-4 { animation: s3b4 30s ease-in-out infinite; }
.session-3.bubble-5 { animation: s3b5 30s ease-in-out infinite; }
.session-3.bubble-6 { animation: s3b6 30s ease-in-out infinite; }
.session-3.bubble-7 { animation: s3b7 30s ease-in-out infinite; }
.session-3.bubble-8 { animation: s3b8 30s ease-in-out infinite; }

/* Session 1 keyframes (active 5% - 33%, all messages stay until 33%) */
@keyframes s1b1 { 0%,5% { opacity:0; } 6%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b2 { 0%,8% { opacity:0; } 9%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b3 { 0%,11% { opacity:0; } 12%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b4 { 0%,14% { opacity:0; } 15%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b5 { 0%,17% { opacity:0; } 18%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b6 { 0%,20% { opacity:0; } 21%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b7 { 0%,23% { opacity:0; } 24%,32% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes s1b8 { 0%,26% { opacity:0; } 27%,32% { opacity:1; } 33%,100% { opacity:0; } }

/* Session 2 keyframes (active 38% - 66%, all messages stay until 66%) */
@keyframes s2b1 { 0%,38% { opacity:0; } 39%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b2 { 0%,41% { opacity:0; } 42%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b3 { 0%,44% { opacity:0; } 45%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b4 { 0%,47% { opacity:0; } 48%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b5 { 0%,50% { opacity:0; } 51%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b6 { 0%,53% { opacity:0; } 54%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b7 { 0%,56% { opacity:0; } 57%,65% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes s2b8 { 0%,59% { opacity:0; } 60%,65% { opacity:1; } 66%,100% { opacity:0; } }

/* Session 3 keyframes (active 71% - 99%, all messages stay until 99%) */
@keyframes s3b1 { 0%,71% { opacity:0; } 72%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b2 { 0%,74% { opacity:0; } 75%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b3 { 0%,77% { opacity:0; } 78%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b4 { 0%,80% { opacity:0; } 81%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b5 { 0%,83% { opacity:0; } 84%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b6 { 0%,86% { opacity:0; } 87%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b7 { 0%,89% { opacity:0; } 90%,98% { opacity:1; } 99%,100% { opacity:0; } }
@keyframes s3b8 { 0%,92% { opacity:0; } 93%,98% { opacity:1; } 99%,100% { opacity:0; } }

/* Traveling Cart Animation */
.traveling-cart {
    position: absolute;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

.traveling-cart svg {
    width: 32px;
    height: 32px;
    color: var(--dark);
}

.travel-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    border: 2px solid white;
}

.badge-x {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
}

.badge-check {
    background: #22c55e;
    color: white;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.6);
}

/* Cart 1 - starts from top-left area (0s-10s in 30s cycle) */
.cart-1 {
    animation: travelCart1 30s ease-in-out infinite;
}
.cart-1 .badge-x { animation: badgeX1 30s ease-in-out infinite; }
.cart-1 .badge-check { animation: badgeCheck1 30s ease-in-out infinite; }

/* Cart 2 - starts from middle-left area (10s-20s) */
.cart-2 {
    animation: travelCart2 30s ease-in-out infinite 10s;
}
.cart-2 .badge-x { animation: badgeX2 30s ease-in-out infinite 10s; }
.cart-2 .badge-check { animation: badgeCheck2 30s ease-in-out infinite 10s; }

/* Cart 3 - starts from bottom-left area (20s-30s) */
.cart-3 {
    animation: travelCart3 30s ease-in-out infinite 20s;
}
.cart-3 .badge-x { animation: badgeX3 30s ease-in-out infinite 20s; }
.cart-3 .badge-check { animation: badgeCheck3 30s ease-in-out infinite 20s; }

/* Cart 1: arrives at center by 6%, stays until convo ends at 33%, then moves right */
@keyframes travelCart1 {
    0% { left: 18%; top: 18%; opacity: 0; transform: scale(0.8); box-shadow: 0 8px 30px rgba(255, 2, 131, 0.4); }
    1% { left: 18%; top: 18%; opacity: 1; transform: scale(1); }
    6% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(255, 2, 131, 0.7); }
    32% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(34, 197, 94, 0.7); }
    33% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(34, 197, 94, 0.7); }
    38% { left: 95%; top: 12%; opacity: 1; transform: scale(1.1); box-shadow: 0 12px 40px rgba(34, 197, 94, 0.6); }
    42% { left: 95%; top: 12%; opacity: 1; transform: scale(1); box-shadow: 0 10px 35px rgba(34, 197, 94, 0.5); }
    45% { left: 95%; top: 12%; opacity: 0; transform: scale(0.9); }
    100% { left: 95%; top: 12%; opacity: 0; }
}

/* Cart 2: arrives at center by 6%, stays until convo ends at 33%, then moves right */
@keyframes travelCart2 {
    0% { left: 12%; top: 38%; opacity: 0; transform: scale(0.8); box-shadow: 0 8px 30px rgba(255, 2, 131, 0.4); }
    1% { left: 12%; top: 38%; opacity: 1; transform: scale(1); }
    6% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(255, 2, 131, 0.7); }
    32% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(34, 197, 94, 0.7); }
    33% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(34, 197, 94, 0.7); }
    38% { left: 92%; top: 45%; opacity: 1; transform: scale(1.1); box-shadow: 0 12px 40px rgba(34, 197, 94, 0.6); }
    42% { left: 92%; top: 45%; opacity: 1; transform: scale(1); box-shadow: 0 10px 35px rgba(34, 197, 94, 0.5); }
    45% { left: 92%; top: 45%; opacity: 0; transform: scale(0.9); }
    100% { left: 92%; top: 45%; opacity: 0; }
}

/* Cart 3: arrives at center by 6%, stays until convo ends at 33%, then moves right */
@keyframes travelCart3 {
    0% { left: 15%; top: 68%; opacity: 0; transform: scale(0.8); box-shadow: 0 8px 30px rgba(255, 2, 131, 0.4); }
    1% { left: 15%; top: 68%; opacity: 1; transform: scale(1); }
    6% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(255, 2, 131, 0.7); }
    32% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(34, 197, 94, 0.7); }
    33% { left: 50%; top: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.2); box-shadow: 0 15px 50px rgba(34, 197, 94, 0.7); }
    38% { left: 90%; top: 78%; opacity: 1; transform: scale(1.1); box-shadow: 0 12px 40px rgba(34, 197, 94, 0.6); }
    42% { left: 90%; top: 78%; opacity: 1; transform: scale(1); box-shadow: 0 10px 35px rgba(34, 197, 94, 0.5); }
    45% { left: 90%; top: 78%; opacity: 0; transform: scale(0.9); }
    100% { left: 90%; top: 78%; opacity: 0; }
}

/* Badge X visible while cart at center, fades when convo ends */
@keyframes badgeX1 {
    0%, 30% { opacity: 1; }
    32%, 100% { opacity: 0; }
}
@keyframes badgeCheck1 {
    0%, 32% { opacity: 0; }
    33%, 44% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

@keyframes badgeX2 {
    0%, 30% { opacity: 1; }
    32%, 100% { opacity: 0; }
}
@keyframes badgeCheck2 {
    0%, 32% { opacity: 0; }
    33%, 44% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

@keyframes badgeX3 {
    0%, 30% { opacity: 1; }
    32%, 100% { opacity: 0; }
}
@keyframes badgeCheck3 {
    0%, 32% { opacity: 0; }
    33%, 44% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

/* Setup Section */
.setup-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, #050508 0%, #0a0a0f 100%);
    position: relative;
    overflow: hidden;
}

/* Animated Background */
.setup-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ff0283 0%, transparent 70%);
    top: -100px;
    left: 10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    bottom: -50px;
    right: 15%;
    animation-delay: -7s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    top: 50%;
    right: 5%;
    animation-delay: -14s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 30px) scale(0.95);
    }
    75% {
        transform: translate(-30px, -10px) scale(1.05);
    }
}

.floating-lines {
    position: absolute;
    inset: 0;
    opacity: 0.6;
}

.floating-lines svg {
    width: 100%;
    height: 100%;
}

.float-line {
    stroke-dasharray: 200 800;
    animation: dashFlow 8s linear infinite;
}

.line-1 { animation-delay: 0s; }
.line-2 { animation-delay: -2s; }
.line-3 { animation-delay: -4s; }
.line-4 { animation-delay: -6s; }

@keyframes dashFlow {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 2, 131, 0.8), 0 0 20px 4px rgba(255, 2, 131, 0.4);
    animation: sparkle 4s ease-in-out infinite;
}

.spark-1 { top: 15%; left: 20%; animation-delay: 0s; }
.spark-2 { top: 25%; right: 25%; animation-delay: -0.8s; }
.spark-3 { top: 60%; left: 15%; animation-delay: -1.6s; }
.spark-4 { top: 70%; right: 30%; animation-delay: -2.4s; }
.spark-5 { top: 40%; left: 50%; animation-delay: -3.2s; }

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.setup-header {
    text-align: center;
    margin-bottom: 4rem;
}

.setup-badge {
    display: inline-block;
    background: rgba(255, 2, 131, 0.15);
    color: #ff0283;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

.setup-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.setup-header h2 .highlight {
    background: linear-gradient(135deg, #ff0283, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.setup-header p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
}

.setup-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.setup-step {
    flex: 1;
    max-width: 300px;
    text-align: center;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.setup-step:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 2, 131, 0.3);
    transform: translateY(-5px);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ff0283, #ff6b6b);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 2, 131, 0.4);
}

.step-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 2, 131, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon svg {
    width: 32px;
    height: 32px;
    stroke: #ff0283;
}

.step-icon.success {
    background: rgba(16, 185, 129, 0.15);
}

.step-icon.success svg {
    stroke: #10b981;
}

.setup-step h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
}

.setup-step p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.step-connector {
    flex-shrink: 0;
    width: 60px;
    color: rgba(255, 255, 255, 0.2);
}

.step-connector svg {
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .setup-steps {
        flex-direction: column;
        gap: 2rem;
    }
    
    .step-connector {
        transform: rotate(90deg);
        width: 40px;
    }
    
    .setup-step {
        max-width: 350px;
        width: 100%;
    }
    
    .setup-header h2 {
        font-size: 2.2rem;
    }
}

/* Workflow Builder Section */
.workflow-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    overflow: hidden;
}

.workflow-container {
    max-width: 1400px;
    margin: 0 auto;
}

.workflow-header {
    text-align: center;
    margin-bottom: 3rem;
}

.workflow-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.2) 100%);
    color: #22c55e;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

.workflow-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--dark);
    margin-bottom: 1rem;
}

.workflow-header p {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* React Flow Container */
#react-flow-wrapper {
    font-family: var(--font-body);
}

#react-flow-wrapper .react-flow__node {
    font-family: var(--font-body);
}

#react-flow-wrapper .react-flow__edge-path {
    stroke-width: 2;
}

#react-flow-wrapper .react-flow__controls {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

#react-flow-wrapper .react-flow__controls-button {
    border: none;
    background: #fff;
}

#react-flow-wrapper .react-flow__controls-button:hover {
    background: #f3f4f6;
}

/* Hide minimap */
#react-flow-wrapper .react-flow__minimap {
    display: none !important;
}

@media (max-width: 768px) {
    .workflow-section {
        padding: 4rem 1rem;
    }
    
    #react-flow-wrapper {
        height: 550px !important;
    }
}

/* Autopilot Section */
.autopilot-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, var(--light) 0%, #fff 50%, var(--light) 100%);
    overflow: visible;
}

.autopilot-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.autopilot-image {
    flex: 1.2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}

.autopilot-image img {
    max-width: 120%;
    height: auto;
    max-height: 650px;
    object-fit: contain;
    margin-right: -5%;
}

.autopilot-content {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 2;
    margin-right: -8rem;
}

.autopilot-content h2 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 2rem;
    line-height: 1.05;
}

.autopilot-subtitle {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.autopilot-subtitle .highlight-text {
    color: var(--primary);
    font-weight: 500;
}

@media (max-width: 900px) {
    .autopilot-container {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .autopilot-content {
        text-align: center;
        margin-right: 0;
        order: 1;
    }
    
    .autopilot-image {
        order: 2;
    }
    
    .autopilot-image img {
        max-height: 400px;
        max-width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .autopilot-section {
        padding: 4rem 1.5rem;
    }
    
    .autopilot-image img {
        max-height: 320px;
    }
}

/* Pricing Section */
.pricing {
    padding: 8rem 2rem;
    background: linear-gradient(180deg, var(--light) 0%, #f0f0f5 100%);
}

.pricing-header {
    text-align: center;
    margin-bottom: 5rem;
}

.pricing-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.pricing-header p {
    font-size: 1.15rem;
    color: var(--gray-600);
    max-width: 400px;
    margin: 0 auto;
}

.pricing-cards {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pricing-card {
    background: white;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    width: 340px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.08);
}

.pricing-card.popular {
    background: linear-gradient(135deg, var(--dark) 0%, #2a2a45 100%);
    border: none;
    transform: scale(1.02);
    z-index: 2;
}

.pricing-card.popular:hover {
    transform: scale(1.02) translateY(-8px);
    box-shadow: 
        0 8px 20px rgba(26, 26, 46, 0.2),
        0 24px 60px rgba(26, 26, 46, 0.25);
}

.pricing-card.popular .plan-name,
.pricing-card.popular .currency,
.pricing-card.popular .price-main,
.pricing-card.popular .price-period,
.pricing-card.popular .features-title {
    color: white;
}

.pricing-card.popular .price-strike {
    color: rgba(255, 255, 255, 0.4);
}

.pricing-card.popular .price-commission {
    color: var(--primary);
}

.pricing-card.popular .plan-features {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.pricing-card.popular .plan-features li {
    color: rgba(255, 255, 255, 0.8);
}

.popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 2, 131, 0.4);
}

.plan-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.plan-price {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.currency {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dark);
    margin-top: 0.6rem;
}

.price-main {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
    letter-spacing: -0.03em;
}

.price-period {
    font-size: 1rem;
    color: var(--gray-600);
    margin-top: auto;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.price-commission {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
    padding: 6px 12px;
    background: rgba(255, 2, 131, 0.08);
    border-radius: 6px;
    display: inline-block;
}

.pricing-card.popular .price-commission {
    background: rgba(255, 2, 131, 0.2);
}

.free-trial-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.pricing-card.popular .free-trial-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.plan-header {
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.plan-cta {
    display: block;
    width: 100%;
    padding: 1.1rem 1.5rem;
    background: var(--dark);
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    margin-top: auto;
    letter-spacing: 0.02em;
}

.plan-cta:hover {
    background: #2d2d4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.3);
}

.pricing-card.popular .plan-cta {
    background: var(--primary);
    box-shadow: 0 4px 20px rgba(255, 2, 131, 0.3);
}

.pricing-card.popular .plan-cta:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 25px rgba(255, 2, 131, 0.4);
}

.plan-features {
    border-top: 1px solid var(--gray-200);
    padding-top: 2rem;
    margin-top: 2rem;
}

.features-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.plan-features ul {
    list-style: none;
}

.plan-features li {
    padding: 0.6rem 0;
    font-size: 0.95rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.plan-features li::before {
    content: "";
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='12' height='12'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* Footer */
.footer {
    background: #000;
    color: white;
    padding: 5rem 2rem 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    flex-wrap: wrap;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
    max-width: 300px;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: white;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.footer-social-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.footer-social-badges .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.footer-social-badges .social-link:hover {
    background: rgba(255, 2, 131, 0.3);
    color: white;
    transform: translateY(-2px);
}

.footer-social-badges .social-link svg {
    width: 20px;
    height: 20px;
}

.shopify-badge-link-footer {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.shopify-badge-link-footer:hover {
    opacity: 0.85;
}

.shopify-badge-link-footer img {
    height: 40px;
    width: auto;
}

.social-sharing {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-sharing a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.social-sharing a:hover {
    background: rgba(255, 2, 131, 0.3);
    color: white;
    transform: translateY(-2px);
}

.social-sharing a svg {
    width: 20px;
    height: 20px;
}

.footer-links {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 140px;
}

.footer-column h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--primary);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

/* Animated Lines Section */
.animated-lines-section {
    background: #000;
    position: relative;
    height: 400px;
    overflow: hidden;
}

.lines-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.flow-line {
    stroke-dasharray: 20 10;
    animation: flowDash 3s linear infinite;
}

.line-1 { animation-delay: 0s; }
.line-2 { animation-delay: 0.5s; }
.line-3 { animation-delay: 1s; }
.line-4 { animation-delay: 0.3s; animation-duration: 4s; }
.line-5 { animation-delay: 0.8s; animation-duration: 4s; }
.line-6 { animation-delay: 1.3s; animation-duration: 4s; }
.line-7 { animation-delay: 0.2s; animation-duration: 5s; }
.line-8 { animation-delay: 0.7s; animation-duration: 5s; }

@keyframes flowDash {
    to {
        stroke-dashoffset: -60;
    }
}

.glow-dot {
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 15px currentColor);
}

.dot-1 { filter: drop-shadow(0 0 8px #ff0283) drop-shadow(0 0 20px #ff0283); }
.dot-2 { filter: drop-shadow(0 0 8px #22c55e) drop-shadow(0 0 20px #22c55e); }
.dot-3 { filter: drop-shadow(0 0 8px #8b5cf6) drop-shadow(0 0 20px #8b5cf6); }

/* Floating Particles */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 8s ease-in-out infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; background: #ff0283; }
.particle:nth-child(2) { left: 25%; animation-delay: 1s; background: #22c55e; }
.particle:nth-child(3) { left: 40%; animation-delay: 2s; background: #8b5cf6; }
.particle:nth-child(4) { left: 55%; animation-delay: 3s; background: #ff0283; }
.particle:nth-child(5) { left: 70%; animation-delay: 4s; background: #22c55e; }
.particle:nth-child(6) { left: 85%; animation-delay: 5s; background: #8b5cf6; }
.particle:nth-child(7) { left: 15%; animation-delay: 2.5s; background: #ff0283; }
.particle:nth-child(8) { left: 75%; animation-delay: 6s; background: #22c55e; }

@keyframes particleFloat {
    0% {
        transform: translateY(400px) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1);
        opacity: 0;
    }
}

/* Bottom Floating Carts */
.bottom-carts {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.bottom-cart {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: 0;
    animation: bottomCartFloat 12s ease-in-out infinite;
}

.bottom-cart svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px currentColor);
}

.bottom-cart.bc1 {
    left: 15%;
    color: var(--primary);
    animation-delay: 0s;
}

.bottom-cart.bc2 {
    left: 50%;
    color: #22c55e;
    animation-delay: 4s;
}

.bottom-cart.bc3 {
    left: 80%;
    color: #8b5cf6;
    animation-delay: 8s;
}

@keyframes bottomCartFloat {
    0% {
        transform: translateY(400px) rotate(-15deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(300px) rotate(-10deg) scale(0.8);
    }
    30% {
        transform: translateY(200px) rotate(5deg) scale(1);
    }
    50% {
        transform: translateY(150px) rotate(-5deg) scale(1.1);
        opacity: 1;
    }
    70% {
        transform: translateY(80px) rotate(8deg) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translateY(20px) rotate(-3deg) scale(0.9);
    }
    100% {
        transform: translateY(-50px) rotate(10deg) scale(0.5);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .bottom-cart {
        width: 24px;
        height: 24px;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .navbar {
        padding: 1.25rem 2rem;
    }
    
    .nav-links {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 1rem 1.5rem;
    }
    
    .nav-links {
        display: none;
    }
    
    .logo {
        position: static;
        transform: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .mobile-menu {
        display: block;
    }
    
    .hero {
        padding: 6rem 1.5rem 8rem;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: center;
        overflow: visible;
    }
    
    /* Hide game elements on mobile */
    .falling-carts,
    .collector,
    .money-counter {
        display: none !important;
    }
    
    .hero h1 {
        font-size: 2.2rem;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: pre-line;
    }
    
    .hero h1 br {
        display: none;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .cta-button {
        padding: 1rem 2.5rem;
        width: 100%;
        max-width: 280px;
    }
    
    .falling-cart {
        opacity: 0.2;
    }
    
    .collector {
        width: 93px;
        height: 93px;
        bottom: -13px;
        margin-left: -46px;
    }
    
    .money-counter {
        padding: 0.4rem 0.8rem;
        border-radius: 30px;
    }
    
    .money-value {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }
    
    .money-label {
        font-size: clamp(0.6rem, 1.8vw, 0.75rem);
    }
    
    .pricing {
        padding: 5rem 1.5rem;
    }
    
    .pricing-header {
        margin-bottom: 3rem;
    }
    
    .pricing-cards {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .pricing-card {
        width: 100%;
        max-width: 360px;
        padding: 2.5rem 2rem;
    }
    
    .pricing-card.popular {
        transform: none;
    }
    
    .pricing-card.popular:hover {
        transform: translateY(-8px);
    }
    
    .price-main {
        font-size: 3.5rem;
    }
    
    .trust-logos {
        padding: 2rem 1.5rem;
    }
    
    .logos-container {
        gap: 1.5rem 2rem;
    }
    
    .logo-item {
        font-size: 0.75rem;
    }
    
    .footer {
        padding: 3rem 1.5rem 1.5rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    .footer-brand {
        max-width: 100%;
        text-align: center;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem;
    }
    
    .footer-column {
        text-align: center;
        min-width: 120px;
    }
    
    .footer-social-badges {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
    
    .animated-lines-section {
        height: 250px;
    }
    
    .how-it-works {
        padding: 4rem 1rem;
    }
    
    .how-header {
        margin-bottom: 2rem;
    }
    
    .flow-animation-wide {
        height: 400px;
    }
    
    .flow-lines-wide {
        display: none;
    }
    
    .carts-cloud {
        width: 25%;
    }
    
    .mini-cart {
        --size: 35px !important;
    }
    
    .mini-badge {
        width: 14px;
        height: 14px;
        font-size: 0.5rem;
    }
    
    .cloud-label {
        font-size: 0.8rem;
        bottom: -20px;
    }
    
    .callfy-hub-center {
        width: 150px;
        height: 150px;
    }
    
    .hub-glow {
        width: 200px;
        height: 200px;
    }
    
    .hub-center {
        width: 60px;
        height: 60px;
    }
    
    .hub-center svg {
        width: 28px;
        height: 28px;
    }
    
    .hub-ring.ring-1 { width: 140px; height: 140px; }
    .hub-ring.ring-2 { width: 110px; height: 110px; }
    .hub-ring.ring-3 { width: 80px; height: 80px; }
    
    .chat-bubble {
        font-size: 0.65rem;
        padding: 6px 10px;
    }
    
    .bubble-1 { top: -25px; left: -70px; }
    .bubble-2 { left: -80px; }
    .bubble-3 { bottom: -25px; right: -70px; }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 1.8rem;
    }
    
    .hero h1 {
        font-size: 1.9rem;
    }
    
    .logos-container {
        gap: 1rem 1.5rem;
    }
    
    .footer-social-badges {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }
    
    .footer-social-badges .social-link {
        order: 2;
    }
    
    .shopify-badge-link-footer {
        order: 1;
        width: 90%;
        max-width: 280px;
    }
    
    .shopify-badge-link-footer img {
        width: 100%;
        height: auto;
    }
}

/* ===========================================
   MOBILE LAYOUT - Clean 3-Step Design
   =========================================== */
@media (max-width: 768px) {
    
    .how-it-works {
        padding: 3rem 1.5rem;
    }
    
    .how-header {
        margin-bottom: 2rem;
    }
    
    .how-header h2 {
        font-size: 1.6rem;
    }
    
    .how-header p {
        font-size: 0.9rem;
    }
    
    /* Hide the complex desktop animation */
    .flow-animation-wide {
        display: none !important;
    }
    
    /* Create simple 3-step mobile flow */
    .how-it-works .how-header::after {
        content: '';
        display: block;
        margin-top: 2rem;
    }
}

/* Mobile Steps - Add to how-it-works section */
.mobile-steps {
    display: none;
}

@media (max-width: 768px) {
    .mobile-steps {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 1rem 0;
    }
    
    .mobile-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
        position: relative;
    }
    
    .mobile-step-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        position: relative;
    }
    
    .mobile-step-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .mobile-step-icon .step-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        color: white;
        border: 3px solid var(--dark);
    }
    
    /* Step 1 - Abandoned (Orange) */
    .mobile-step.step-abandoned .mobile-step-icon {
        background: rgba(249, 115, 22, 0.15);
        border: 2px solid #f97316;
    }
    .mobile-step.step-abandoned .mobile-step-icon svg {
        color: #f97316;
    }
    .mobile-step.step-abandoned .step-badge {
        background: #ef4444;
    }
    .mobile-step.step-abandoned .mobile-step-title {
        color: #f97316;
    }
    
    /* Step 2 - Call */
    .mobile-step.step-call {
        position: relative;
    }
    .mobile-step.step-call .mobile-step-icon {
        background: var(--primary);
        box-shadow: 0 0 30px rgba(255, 2, 131, 0.5);
        animation: pulse-phone 2s ease-in-out infinite;
    }
    .mobile-step.step-call .mobile-step-icon svg {
        color: white;
    }
    
    @keyframes pulse-phone {
        0%, 100% { box-shadow: 0 0 20px rgba(255, 2, 131, 0.4); }
        50% { box-shadow: 0 0 40px rgba(255, 2, 131, 0.7); }
    }
    
    /* Step 3 - Recovered */
    .mobile-step.step-recovered .mobile-step-icon {
        background: rgba(34, 197, 94, 0.15);
        border: 2px solid #22c55e;
    }
    .mobile-step.step-recovered .mobile-step-icon svg {
        color: #22c55e;
    }
    .mobile-step.step-recovered .step-badge {
        background: #22c55e;
    }
    .mobile-step.step-recovered .mobile-step-title {
        color: #22c55e;
    }
    
    .mobile-step-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
        margin-bottom: 0.5rem;
    }
    
    .mobile-step-desc {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
        max-width: 250px;
    }
    
    /* Arrows between steps */
    .mobile-arrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    .mobile-arrow svg {
        width: 24px;
        height: 40px;
        opacity: 0.5;
    }
    
    .mobile-arrow.arrow-orange svg {
        color: #f97316;
    }
    
    .mobile-arrow.arrow-green svg {
        color: #22c55e;
    }
    
    /* ========================================
       MOBILE ANIMATION SEQUENCE
       Total: 12s cycle
       0-1s: Step 1 appears
       1-2s: Arrow 1 appears
       2-3s: Step 2 appears
       3-8s: Conversation plays
       8-9s: Arrow 2 appears
       9-10s: Step 3 appears
       10-12s: Hold, then reset
       ======================================== */
    
    .mobile-step.step-abandoned {
        opacity: 0;
        animation: fadeInStep 12s ease-in-out infinite;
    }
    
    .mobile-arrow.arrow-orange {
        opacity: 0;
        animation: fadeInArrow1 12s ease-in-out infinite;
    }
    
    .mobile-step.step-call {
        opacity: 0;
        animation: fadeInStep2 12s ease-in-out infinite;
    }
    
    .mobile-arrow.arrow-green {
        opacity: 0;
        animation: fadeInArrow2 12s ease-in-out infinite;
    }
    
    .mobile-step.step-recovered {
        opacity: 0;
        animation: fadeInStep3 12s ease-in-out infinite;
    }
    
    @keyframes fadeInStep {
        0%, 5% { opacity: 0; transform: translateY(-10px); }
        8%, 90% { opacity: 1; transform: translateY(0); }
        95%, 100% { opacity: 0; transform: translateY(-10px); }
    }
    
    @keyframes fadeInArrow1 {
        0%, 10% { opacity: 0; }
        15%, 90% { opacity: 0.6; }
        95%, 100% { opacity: 0; }
    }
    
    @keyframes fadeInStep2 {
        0%, 15% { opacity: 0; transform: translateY(-10px); }
        20%, 90% { opacity: 1; transform: translateY(0); }
        95%, 100% { opacity: 0; transform: translateY(-10px); }
    }
    
    @keyframes fadeInArrow2 {
        0%, 46% { opacity: 0; }
        50%, 90% { opacity: 0.6; }
        95%, 100% { opacity: 0; }
    }
    
    @keyframes fadeInStep3 {
        0%, 50% { opacity: 0; transform: translateY(-10px); }
        54%, 90% { opacity: 1; transform: translateY(0); }
        95%, 100% { opacity: 0; transform: translateY(-10px); }
    }
    
    /* Mobile conversation bubbles */
    .mobile-convo {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        width: 100%;
        max-width: 320px;
        padding: 0 1rem;
    }
    
    .mobile-bubble {
        padding: 10px 16px;
        border-radius: 18px;
        font-size: 0.85rem;
        opacity: 0;
        max-width: 85%;
    }
    
    .mobile-bubble.callfy {
        background: var(--primary);
        color: white;
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }
    
    .mobile-bubble.customer {
        background: white;
        color: var(--dark);
        align-self: flex-end;
        border-bottom-right-radius: 4px;
    }
    
    .mobile-bubble.success {
        background: #22c55e;
        color: white;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
    }
    
    /* Bubble animations - appear and STAY until end */
    .mobile-bubble:nth-child(1) { animation: bubbleIn1 12s ease-out infinite; }
    .mobile-bubble:nth-child(2) { animation: bubbleIn2 12s ease-out infinite; }
    .mobile-bubble:nth-child(3) { animation: bubbleIn3 12s ease-out infinite; }
    .mobile-bubble:nth-child(4) { animation: bubbleIn4 12s ease-out infinite; }
    
    @keyframes bubbleIn1 {
        0%, 24% { opacity: 0; transform: scale(0.8) translateY(5px); }
        27%, 88% { opacity: 1; transform: scale(1) translateY(0); }
        93%, 100% { opacity: 0; transform: scale(0.8) translateY(-5px); }
    }
    
    @keyframes bubbleIn2 {
        0%, 30% { opacity: 0; transform: scale(0.8) translateY(5px); }
        33%, 88% { opacity: 1; transform: scale(1) translateY(0); }
        93%, 100% { opacity: 0; transform: scale(0.8) translateY(-5px); }
    }
    
    @keyframes bubbleIn3 {
        0%, 36% { opacity: 0; transform: scale(0.8) translateY(5px); }
        39%, 88% { opacity: 1; transform: scale(1) translateY(0); }
        93%, 100% { opacity: 0; transform: scale(0.8) translateY(-5px); }
    }
    
    @keyframes bubbleIn4 {
        0%, 42% { opacity: 0; transform: scale(0.8) translateY(5px); }
        45%, 88% { opacity: 1; transform: scale(1) translateY(0); }
        93%, 100% { opacity: 0; transform: scale(0.8) translateY(-5px); }
    }
}

/* =============================================
   Why AI Calls Section - The New Era
   ============================================= */
.why-ai-section {
    padding: 8rem 2rem;
    background: linear-gradient(180deg, #0a0a1a 0%, #12121f 50%, var(--dark) 100%);
    position: relative;
    overflow: hidden;
}

.why-ai-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 2, 131, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(34, 197, 94, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.why-ai-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.why-ai-header {
    text-align: center;
    margin-bottom: 4rem;
}

.era-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(255, 2, 131, 0.15) 0%, rgba(255, 2, 131, 0.05) 100%);
    border: 1px solid rgba(255, 2, 131, 0.3);
    color: var(--primary);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.why-ai-header h2 {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.why-ai-header h2 .strikethrough {
    position: relative;
    color: rgba(255, 255, 255, 0.4);
    display: inline-block;
}

/* Strikethrough line is now animated - see .animated-strike below */

.why-ai-header p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.comparison-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.comparison-card:hover {
    transform: translateY(-5px);
}

.comparison-card.old-way {
    border-color: rgba(255, 100, 100, 0.2);
    overflow: visible;
}

.comparison-card.old-way:hover {
    border-color: rgba(255, 100, 100, 0.4);
}

/* Spider Web */
.spider-web {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transform: scale(0.3);
    transform-origin: top right;
    transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 1.2s;
}

.reveal-card.revealed .spider-web {
    opacity: 1;
    transform: scale(1);
}

/* Spider Descending from Web */
.spider-container {
    position: absolute;
    top: 60px;
    right: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 12;
    opacity: 0;
}

.reveal-card.revealed .spider-container {
    animation: spider-fade-in 0.3s ease-out forwards;
    animation-delay: 1.8s;
}

.spider-thread {
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, #ff0283 0%, rgba(255, 2, 131, 0.5) 100%);
    transform-origin: top center;
}

.reveal-card.revealed .spider-thread {
    animation: thread-grow 1.5s ease-out forwards;
    animation-delay: 1.8s;
}

.spider {
    width: 35px;
    height: 35px;
}

.reveal-card.revealed .spider {
    animation: spider-sway 3s ease-in-out infinite;
    animation-delay: 3.5s;
}

@keyframes spider-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes thread-grow {
    0% {
        height: 0;
    }
    100% {
        height: 80px;
    }
}

@keyframes spider-sway {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* Dead Flies Animation */
.dead-flies {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.fly {
    position: absolute;
    width: 48px;
    height: 48px;
    opacity: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Fly 1 - Upper left area */
.fly-1 {
    top: 25%;
    left: 15%;
}

.reveal-card.revealed .fly-1 {
    animation: fly-enter-1 10s ease-out forwards;
    animation-delay: 1s;
}

/* Fly 2 - Middle right */
.fly-2 {
    top: 45%;
    right: 15%;
    width: 44px;
    height: 44px;
}

.reveal-card.revealed .fly-2 {
    animation: fly-enter-2 12s ease-out forwards;
    animation-delay: 1.5s;
}

/* Fly 3 - Lower center */
.fly-3 {
    bottom: 15%;
    left: 35%;
    width: 42px;
    height: 42px;
}

.reveal-card.revealed .fly-3 {
    animation: fly-enter-3 11s ease-out forwards;
    animation-delay: 2s;
}

/* Fly 4 - Lower left */
.fly-4 {
    bottom: 25%;
    left: 25%;
    width: 38px;
    height: 38px;
}

.reveal-card.revealed .fly-4 {
    animation: fly-enter-4 9s ease-out forwards;
    animation-delay: 2.5s;
}

/* Fly 1: Enters from top-left of screen */
@keyframes fly-enter-1 {
    0% {
        opacity: 0.9;
        transform: translate(-100vw, -100vh) rotate(135deg) scale(0.8);
    }
    25% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(90deg) scale(1);
    }
    35% {
        transform: translate(30px, 5px) rotate(85deg);
    }
    50% {
        transform: translate(70px, 0) rotate(95deg);
    }
    65% {
        transform: translate(70px, 0) rotate(-90deg);
    }
    80% {
        transform: translate(30px, 3px) rotate(-85deg);
    }
    100% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(90deg);
    }
}

/* Fly 2: Enters from right of screen */
@keyframes fly-enter-2 {
    0% {
        opacity: 0.9;
        transform: translate(100vw, -50vh) rotate(-135deg) scale(0.8);
    }
    20% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(180deg) scale(1);
    }
    35% {
        transform: translate(-10px, 60px) rotate(170deg);
    }
    50% {
        transform: translate(5px, 120px) rotate(185deg);
    }
    55% {
        transform: translate(5px, 120px) rotate(0deg);
    }
    75% {
        transform: translate(0, 50px) rotate(-10deg);
    }
    100% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(180deg);
    }
}

/* Fly 3: Enters from bottom of screen */
@keyframes fly-enter-3 {
    0% {
        opacity: 0.9;
        transform: translate(50vw, 100vh) rotate(-45deg) scale(0.8);
    }
    22% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(45deg) scale(1);
    }
    35% {
        transform: translate(50px, -20px) rotate(50deg);
    }
    50% {
        transform: translate(80px, -30px) rotate(-135deg);
    }
    70% {
        transform: translate(40px, -10px) rotate(-130deg);
    }
    85% {
        transform: translate(40px, -10px) rotate(45deg);
    }
    100% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(45deg);
    }
}

/* Fly 4: Enters from left of screen */
@keyframes fly-enter-4 {
    0% {
        opacity: 0.9;
        transform: translate(-100vw, 30vh) rotate(45deg) scale(0.8);
    }
    28% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(30deg) scale(1);
    }
    45% {
        transform: translate(50px, 10px) rotate(80deg);
    }
    60% {
        transform: translate(50px, 10px) rotate(-60deg);
    }
    80% {
        transform: translate(20px, 15px) rotate(-40deg);
    }
    100% {
        opacity: 0.9;
        transform: translate(0, 0) rotate(30deg);
    }
}

.comparison-card.new-way {
    border: 2px solid rgba(34, 197, 94, 0.5);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    overflow: visible;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.15), 0 0 40px rgba(34, 197, 94, 0.1);
}

.comparison-card.new-way:hover {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.25), 0 0 50px rgba(34, 197, 94, 0.15);
}

/* Lightning Bolt for New Way Card */
.card-lightning {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 50px;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.8));
    transition: opacity 0.5s ease;
    transition-delay: 1.2s;
}

.reveal-card.revealed .card-lightning {
    opacity: 1;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.status-indicator {
    position: relative;
    width: 12px;
    height: 12px;
}

.status-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-indicator.fading .status-dot {
    background: rgba(255, 100, 100, 0.6);
}

.status-indicator.active .status-dot {
    background: #22c55e;
}

.status-indicator.active .pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.era-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.comparison-card h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1.5rem;
}

/* Custom Cursors for Headlines Only */
h3.cursor-fly {
    cursor: url("pink-fly.svg") 24 24, auto;
}

h3.cursor-lightning {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 40'%3E%3Cpath fill='%2322c55e' d='M13 2L4 17h7l-2 11 9-15h-7l2-11z'/%3E%3C/svg%3E") 16 16, auto;
}

.comparison-items {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 2rem;
}

.comparison-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.comparison-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.comparison-item.negative svg {
    stroke: rgba(255, 100, 100, 0.8);
}

.comparison-item.positive svg {
    stroke: #22c55e;
}

.comparison-item span {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.message-preview {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.message-preview.old {
    opacity: 0.7;
}

.message-preview.new {
    border-color: rgba(34, 197, 94, 0.2);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.preview-icon {
    font-size: 1rem;
}

.preview-header span:last-child {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.message-preview p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.preview-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.why-ai-cta {
    text-align: center;
}

.why-ai-cta .cta-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

/* Why AI Section - Reveal Animations */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--delay, 0) * 0.15s);
}

.reveal-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--card-delay, 0s);
}

.reveal-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.8s;
}

.reveal-cta.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animated Strikethrough Effect */
.animated-strike {
    position: relative;
}

.animated-strike::after {
    content: '';
    position: absolute;
    left: -5%;
    right: -5%;
    top: 50%;
    height: 4px;
    background: var(--primary);
    transform: rotate(-3deg) scaleX(0);
    transform-origin: left center;
    border-radius: 2px;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition-delay: 0.6s;
}

.animated-strike.strike-active::after {
    transform: rotate(-3deg) scaleX(1);
}

/* Shake animation for "Dead" text after strike */
@keyframes dead-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    10% { transform: translateX(-2px) rotate(-1deg); }
    20% { transform: translateX(2px) rotate(1deg); }
    30% { transform: translateX(-2px) rotate(-0.5deg); }
    40% { transform: translateX(2px) rotate(0.5deg); }
    50% { transform: translateX(-1px) rotate(-0.25deg); }
    60% { transform: translateX(1px) rotate(0); }
}

.animated-strike.strike-active {
    animation: dead-shake 0.5s ease-out;
    animation-delay: 1s;
    display: inline-block;
}

/* Glitch effect on reveal */
@keyframes glitch-text {
    0% { 
        opacity: 0;
        transform: translateX(-10px);
        filter: blur(4px);
    }
    20% {
        opacity: 0.5;
        transform: translateX(5px);
        filter: blur(2px);
    }
    40% {
        opacity: 0.8;
        transform: translateX(-3px);
        filter: blur(1px);
    }
    60% {
        opacity: 0.9;
        transform: translateX(2px);
        filter: blur(0.5px);
    }
    80% {
        opacity: 1;
        transform: translateX(-1px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.why-ai-header h2.revealed {
    animation: glitch-text 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.15s;
}

/* Why AI Section Mobile */
@media (max-width: 900px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .why-ai-section {
        padding: 5rem 1.5rem;
    }
    
    .why-ai-header h2 {
        font-size: 2.25rem;
    }
    
    .why-ai-header p {
        font-size: 1rem;
    }
    
    .comparison-card {
        padding: 1.75rem;
    }
    
    .comparison-card h3 {
        font-size: 1.4rem;
    }
    
    .comparison-item span {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .why-ai-header h2 {
        font-size: 1.85rem;
    }
    
    .era-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
    
    .comparison-card {
        padding: 1.5rem;
    }
}

/* Listen in Action Section */
.listen-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, var(--dark) 0%, #1a1a35 100%);
    position: relative;
    overflow: hidden;
}

/* Corner Brackets */
.corner-bracket {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 1;
}

.corner-bracket::before,
.corner-bracket::after {
    content: '';
    position: absolute;
    background: #22c55e;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
    animation: bracketGlow 2s ease-in-out infinite;
}

.corner-bracket.top-left {
    top: 30px;
    left: 30px;
}

.corner-bracket.top-left::before {
    width: 4px;
    height: 60px;
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.corner-bracket.top-left::after {
    width: 60px;
    height: 4px;
    top: 0;
    left: 0;
    animation-delay: 0.2s;
}

.corner-bracket.top-right {
    top: 30px;
    right: 30px;
}

.corner-bracket.top-right::before {
    width: 4px;
    height: 60px;
    top: 0;
    right: 0;
    animation-delay: 0.4s;
}

.corner-bracket.top-right::after {
    width: 60px;
    height: 4px;
    top: 0;
    right: 0;
    animation-delay: 0.6s;
}

.corner-bracket.bottom-left {
    bottom: 30px;
    left: 30px;
}

.corner-bracket.bottom-left::before {
    width: 4px;
    height: 60px;
    bottom: 0;
    left: 0;
    animation-delay: 0.8s;
}

.corner-bracket.bottom-left::after {
    width: 60px;
    height: 4px;
    bottom: 0;
    left: 0;
    animation-delay: 1s;
}

.corner-bracket.bottom-right {
    bottom: 30px;
    right: 30px;
}

.corner-bracket.bottom-right::before {
    width: 4px;
    height: 60px;
    bottom: 0;
    right: 0;
    animation-delay: 1.2s;
}

.corner-bracket.bottom-right::after {
    width: 60px;
    height: 4px;
    bottom: 0;
    right: 0;
    animation-delay: 1.4s;
}

@keyframes bracketGlow {
    0%, 100% {
        opacity: 0.5;
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.9);
    }
}

.listen-content {
    max-width: 1200px;
    margin: 0 auto;
}

.listen-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.listen-header h2 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.listen-header h2 .highlight {
    color: var(--primary);
    font-style: italic;
}

.listen-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
    margin: 0 auto;
}

/* Listen Layout - Cards + Pitch */
.listen-layout {
    display: flex;
    gap: 3rem;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
}

.cards-library {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
}

.personalized-pitch {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Carousel Styles */
.cards-carousel {
    position: relative;
    overflow: hidden;
    padding: 20px 50px;
    margin: -20px -30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cards-carousel::before,
.cards-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 5;
    pointer-events: none;
}

.cards-carousel::before {
    left: 0;
    background: linear-gradient(to right, #1a1a35, transparent);
}

.cards-carousel::after {
    right: 0;
    background: linear-gradient(to left, #1a1a35, transparent);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
}

.call-demos {
    display: flex;
    gap: 0;
}

.carousel-track .call-card {
    flex: 0 0 100%;
    min-width: 100%;
    opacity: 0.4;
    transform: scale(0.85);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: blur(2px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.carousel-track .call-card.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.carousel-track .call-card .call-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.carousel-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav svg {
    width: 20px;
    height: 20px;
}

.carousel-nav.prev {
    left: 0;
}

.carousel-nav.next {
    right: 0;
}

/* Carousel Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dots .dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.carousel-dots .dot.active {
    background: var(--primary);
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(255, 2, 131, 0.5);
}

/* Personalized Pitch Section */
.personalized-pitch {
    flex: 1;
    position: sticky;
    top: 100px;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(255, 2, 131, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    color: white;
}

.pitch-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 2, 131, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.pitch-badge svg {
    width: 16px;
    height: 16px;
    fill: var(--primary);
    stroke: var(--primary);
}

.personalized-pitch h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: white;
}

.personalized-pitch h3 .highlight {
    color: var(--primary);
}

.pitch-main {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.pitch-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pitch-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.pitch-features li svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #22c55e;
    margin-top: 2px;
}

.pitch-features li strong {
    color: white;
}

.pitch-main-hero {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.pitch-main-hero em {
    color: var(--primary);
    font-style: normal;
    font-weight: 600;
}

.conversation-insight {
    padding: 1.25rem;
    background: rgba(255, 2, 131, 0.08);
    border-left: 3px solid var(--primary);
    border-radius: 0 12px 12px 0;
    margin-bottom: 1.5rem;
}

.insight-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.insight-conclusion {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    margin: 0;
}

.insight-conclusion em {
    color: var(--primary);
    font-style: normal;
    font-weight: 600;
}

.pitch-secondary {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
}

.pitch-tagline {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.4;
}

.pitch-features.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.pitch-features.compact li {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.pitch-features.compact li svg {
    width: 16px;
    height: 16px;
}

.pitch-illustration {
    margin-top: auto;
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: -2.5rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
}

.conversation-illustration {
    width: 120%;
    max-width: none;
    height: auto;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.conversation-illustration:hover {
    opacity: 0.8;
}

@media (min-width: 1200px) {
    .conversation-illustration {
        width: 180%;
    }
}

@media (min-width: 1600px) {
    .conversation-illustration {
        width: 220%;
    }
}

.pitch-stat {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: #22c55e;
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive for Listen Layout */
@media (max-width: 1100px) {
    .listen-layout {
        flex-direction: column;
        gap: 3rem;
    }
    
    .cards-library {
        flex: 1;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .personalized-pitch {
        position: static;
        max-width: 700px;
        margin: 0 auto;
    }
}

.call-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.75rem;
    transition: all 0.3s ease;
}

.call-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.call-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.call-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.call-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.call-icon.pink {
    background: linear-gradient(135deg, var(--primary) 0%, #ff4d94 100%);
}

.call-icon.purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.call-icon.green {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
}

.call-icon svg {
    width: 26px;
    height: 26px;
    color: white;
}

.call-header-info h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.2rem;
}

.call-header-info p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sound-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.sound-wave span {
    width: 3px;
    height: 8px;
    background: var(--primary);
    border-radius: 2px;
    animation: soundWave 1s ease-in-out infinite;
}

.sound-wave span:nth-child(1) { animation-delay: 0s; }
.sound-wave span:nth-child(2) { animation-delay: 0.1s; }
.sound-wave span:nth-child(3) { animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { animation-delay: 0.3s; }
.sound-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes soundWave {
    0%, 100% {
        height: 8px;
        opacity: 0.4;
    }
    50% {
        height: 16px;
        opacity: 0.7;
    }
}

.sound-wave.playing span {
    animation: soundWavePlaying 0.4s ease-in-out infinite;
}

@keyframes soundWavePlaying {
    0%, 100% {
        height: 6px;
        opacity: 0.8;
    }
    50% {
        height: 24px;
        opacity: 1;
    }
}

.play-btn-corner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.play-btn-corner:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 2, 131, 0.4);
}

.play-btn-corner svg {
    width: 18px;
    height: 18px;
    color: white;
    margin-left: 2px;
}

/* Chat Section */
.call-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    min-height: 180px;
}

.chat-msg {
    max-width: 92%;
    padding: 0.65rem 0.9rem;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Hide all messages by default */
.call-card .chat-msg {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
}

/* Animate messages in the ACTIVE card */
.call-card.active .chat-msg {
    animation: chatMsgAppear 0.4s ease-out forwards;
}

/* Staggered appearance - each message appears in turn */
.call-card.active .chat-msg[class*="msg-1"]:not([class*="msg-1"]) { animation-delay: 0s; }
.call-card.active .chat-msg.msg-1 { animation-delay: 0s; }
.call-card.active .chat-msg.msg-2 { animation-delay: 0.5s; }
.call-card.active .chat-msg.msg-3 { animation-delay: 1s; }
.call-card.active .chat-msg.msg-4 { animation-delay: 1.5s; }
.call-card.active .chat-msg.msg-5 { animation-delay: 2s; }
.call-card.active .chat-msg.msg-6 { animation-delay: 2.5s; }
.call-card.active .chat-msg.msg-7 { animation-delay: 3s; }
.call-card.active .chat-msg.msg-8 { animation-delay: 3.5s; }
.call-card.active .chat-msg.msg-9 { animation-delay: 4s; }
.call-card.active .chat-msg.msg-10 { animation-delay: 4.5s; }
.call-card.active .chat-msg.msg-11 { animation-delay: 5s; }
.call-card.active .chat-msg.msg-12 { animation-delay: 5.5s; }
.call-card.active .chat-msg.msg-13 { animation-delay: 6s; }

@keyframes chatMsgAppear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-msg.callfy {
    background: var(--primary);
    color: white;
    align-self: flex-start;
    border-bottom-left-radius: 6px;
}

.chat-msg.customer {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    align-self: flex-end;
    border-bottom-right-radius: 6px;
}

.chat-msg.recovered {
    background: #22c55e;
    color: white;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.chat-msg.recovered svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.listen-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.listen-note svg {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.listen-note span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Listen Section Mobile */
@media (max-width: 768px) {
    .listen-layout {
        flex-direction: column;
        gap: 2rem;
    }
    
    /* Carousel arrows below on mobile */
    .cards-carousel {
        padding: 20px 10px 80px;
        position: relative;
    }
    
    .carousel-nav {
        position: absolute;
        top: auto;
        bottom: 20px;
        transform: none;
    }
    
    .carousel-nav.prev {
        left: calc(50% - 60px);
    }
    
    .carousel-nav.next {
        right: calc(50% - 60px);
    }
    
    .carousel-nav:hover {
        transform: scale(1.1);
    }
    
    .cards-library {
        width: 100%;
    }
    
    .call-demos {
        flex-direction: column;
        gap: 1rem;
    }
    
    .call-card {
        max-width: 100%;
    }
    
    .personalized-pitch {
        padding: 1.5rem;
    }
    
    .personalized-pitch h3 {
        font-size: 1.5rem;
    }
    
    .pitch-main {
        font-size: 0.95rem;
    }
    
    .pitch-features li {
        font-size: 0.9rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .listen-section {
        padding: 4rem 1.5rem;
    }
    
    .listen-header h2 {
        font-size: 2rem;
    }
    
    .listen-header p {
        font-size: 1rem;
    }
    
    .call-card {
        padding: 1.25rem;
        gap: 1rem;
    }
    
    .call-icon {
        width: 42px;
        height: 42px;
    }
    
    .call-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .call-header-info h3 {
        font-size: 1rem;
    }
    
    .call-header-info p {
        font-size: 0.8rem;
    }
    
    .play-btn-corner {
        width: 40px;
        height: 40px;
    }
    
    .play-btn-corner svg {
        width: 16px;
        height: 16px;
    }
    
    .call-chat {
        padding: 0.75rem;
        min-height: auto;
    }
    
    .chat-msg {
        max-width: 90%;
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .listen-note {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* Voice Agents Section */
.voice-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    padding: 6rem 2rem;
}

.voice-wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.siri-canvas {
    width: 100%;
    height: 450px;
    opacity: 0.95;
}

/* Voice Card */
.voice-card {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 32px;
    padding: 2rem 2rem 1.5rem;
    max-width: 480px;
    width: 95%;
    text-align: center;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
}

/* Selected Role Display */
.selected-role {
    background: linear-gradient(135deg, rgba(255, 2, 131, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(255, 2, 131, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.role-playing {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.role-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.role-objection {
    background: rgba(255, 2, 131, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #ff0283;
}

/* Voice Talk Button - Concentric Circles */
.voice-talk-btn-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

/* Concentric rings */
.concentric-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.concentric-ring.ring-3 {
    width: 220px;
    height: 220px;
    background: rgba(255, 2, 131, 0.15);
    animation: ring-pulse 3s ease-in-out infinite;
}

.concentric-ring.ring-2 {
    width: 150px;
    height: 150px;
    background: rgba(255, 2, 131, 0.3);
    animation: ring-pulse 3s ease-in-out infinite;
    animation-delay: 0.2s;
}

.concentric-ring.ring-1 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff0283 0%, #d4006a 100%);
    box-shadow: 0 0 30px rgba(255, 2, 131, 0.5);
    animation: ring-pulse 3s ease-in-out infinite, center-glow 2s ease-in-out infinite;
    animation-delay: 0.4s;
}

@keyframes ring-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes center-glow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 2, 131, 0.5);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 2, 131, 0.8);
    }
}

.voice-talk-btn {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.talk-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    z-index: 2;
}

.voice-talk-btn svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

.talk-text, .listening-text {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    white-space: nowrap;
}

.voice-talk-btn:hover ~ .concentric-ring.ring-1 {
    box-shadow: 0 0 60px rgba(255, 2, 131, 1);
}

.voice-talk-btn .pulse-ring {
    display: none;
}

/* Playing state */
.voice-talk-btn-wrapper.playing .concentric-ring.ring-3 {
    background: rgba(16, 185, 129, 0.15);
}

.voice-talk-btn-wrapper.playing .concentric-ring.ring-2 {
    background: rgba(16, 185, 129, 0.3);
}

.voice-talk-btn-wrapper.playing .concentric-ring.ring-1 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

@keyframes pulse-glow-green {
    0%, 100% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    }
    50% {
        box-shadow: 0 0 60px rgba(16, 185, 129, 0.8);
    }
}

.voice-talk-btn-wrapper.playing .concentric-ring.ring-1 {
    animation: ring-pulse 3s ease-in-out infinite, pulse-glow-green 2s ease-in-out infinite;
}

.voice-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.voice-card .gradient-text {
    background: linear-gradient(135deg, #ff0283 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.voice-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Phone Input Form */
.phone-input-wrapper {
    margin: 0 auto 1.5rem;
    max-width: 360px;
}

.test-call-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.phone-input-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.phone-input-container:focus-within {
    border-color: #ff0283;
    box-shadow: 0 0 0 4px rgba(255, 2, 131, 0.1);
}

/* Country Selector */
.country-selector {
    position: relative;
    flex-shrink: 0;
}

.country-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    padding-right: 0.25rem;
    border-right: 1px solid #e0e0e0;
    margin-right: 0.75rem;
}

.country-flag {
    font-size: 1.25rem;
    line-height: 1;
}

.country-code {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
}

.dropdown-arrow {
    width: 14px;
    height: 14px;
    color: #999;
    transition: transform 0.2s ease;
}

.country-selector.open .dropdown-arrow {
    transform: rotate(180deg);
}

.country-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: -12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.country-selector.open .country-dropdown {
    display: block;
}

.country-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.country-option:first-child {
    border-radius: 12px 12px 0 0;
}

.country-option:last-child {
    border-radius: 0 0 12px 12px;
}

.country-option:hover {
    background: #f8f9fa;
}

.phone-input-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    margin-right: 0.75rem;
    color: #999;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.phone-input-icon svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
}

.phone-input-container:focus-within .phone-input-icon {
    color: #ff0283;
}

.phone-input-container input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #333;
    outline: none;
    padding: 0.5rem 0;
}

.phone-input-container input::placeholder {
    color: #aaa;
}

.call-me-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff0283 0%, #d6006d 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.call-me-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 2, 131, 0.4);
}

.call-me-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-loading .spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

.phone-disclaimer {
    font-size: 0.75rem !important;
    color: #999 !important;
    margin-bottom: 0 !important;
}

/* Call Status */
.call-status {
    text-align: center;
    padding: 1.5rem;
}

.status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.status-icon.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    animation: pulse-success 2s ease-in-out infinite;
}

.status-icon.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.status-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.status-message {
    font-size: 1.1rem !important;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 1rem !important;
}

.status-cta {
    display: inline-block;
    background: linear-gradient(135deg, #ff0283 0%, #d6006d 100%);
    color: white !important;
    text-decoration: none;
    padding: 0.85rem 1.75rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.status-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 2, 131, 0.4);
}

@keyframes pulse-success {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
    }
}

/* Role Carousel Inside Card */
.role-carousel {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.role-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.role-carousel-header span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 600;
}

.role-nav {
    display: flex;
    gap: 0.5rem;
}

.role-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-nav-btn svg {
    width: 16px;
    height: 16px;
    color: #333;
}

.role-nav-btn:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
}

.role-carousel-viewport {
    overflow: hidden;
    border-radius: 16px;
}

.role-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.role-card {
    flex: 0 0 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.role-card.active {
    border-color: rgba(255, 2, 131, 0.3);
    box-shadow: 0 4px 20px rgba(255, 2, 131, 0.1);
}

.role-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.role-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0283 0%, #ff6b9d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.role-avatar.purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.role-avatar.cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
}

.role-avatar.green {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.role-avatar.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.role-avatar svg {
    width: 22px;
    height: 22px;
    color: #fff;
}

.role-identity h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.1rem;
}

.role-age {
    font-size: 0.7rem;
    color: #888;
}

.role-cart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
}

.cart-emoji {
    font-size: 1.5rem;
}

.cart-details {
    display: flex;
    flex-direction: column;
}

.cart-product {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
}

.cart-price {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 600;
}

.role-previous-purchases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.prev-label {
    font-size: 0.65rem;
    color: #888;
    font-weight: 500;
    width: 100%;
    margin-bottom: 0.1rem;
}

.prev-item {
    font-size: 0.65rem;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.role-objection-box {
    background: rgba(255, 2, 131, 0.05);
    border: 1px solid rgba(255, 2, 131, 0.15);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.objection-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ff0283;
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
}

.role-objection-box p {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
    font-style: italic;
    margin: 0;
}

.role-traits {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trait {
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    color: #666;
}

.role-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.role-dot.active {
    background: #ff0283;
    width: 24px;
    border-radius: 4px;
}

/* Floating Wave Rings */
.floating-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

.wave-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 2, 131, 0.2);
    border-radius: 50%;
    animation: wave-expand 4s ease-out infinite;
}

.ring-1 {
    width: 600px;
    height: 600px;
    animation-delay: 0s;
}

.ring-2 {
    width: 800px;
    height: 800px;
    animation-delay: 1.3s;
}

.ring-3 {
    width: 1000px;
    height: 1000px;
    animation-delay: 2.6s;
}

@keyframes wave-expand {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Voice Section Mobile */
@media (max-width: 768px) {
    .voice-section {
        min-height: auto;
        padding: 4rem 1rem;
    }
    
    .voice-card {
        padding: 1.5rem 1.25rem 1.25rem;
        border-radius: 24px;
    }
    
    .voice-talk-btn-wrapper {
        width: 200px;
        height: 200px;
    }
    
    .concentric-ring.ring-5 {
        width: 200px;
        height: 200px;
    }
    
    .concentric-ring.ring-4 {
        width: 165px;
        height: 165px;
    }
    
    .concentric-ring.ring-3 {
        width: 130px;
        height: 130px;
    }
    
    .concentric-ring.ring-2 {
        width: 95px;
        height: 95px;
    }
    
    .concentric-ring.ring-1 {
        width: 60px;
        height: 60px;
    }
    
    .voice-talk-btn {
        width: 60px;
        height: 60px;
    }
    
    .voice-talk-btn svg {
        width: 22px;
        height: 22px;
    }
    
    .talk-text, .listening-text {
        font-size: 0.45rem;
    }
    
    .voice-card h3 {
        font-size: 1.3rem;
    }
    
    .voice-card p {
        font-size: 0.8rem;
    }
    
    /* Phone Input Mobile */
    .phone-input-wrapper {
        max-width: 100%;
    }
    
    .phone-input-container {
        padding: 0.4rem 0.75rem;
    }
    
    .phone-input-container input {
        font-size: 0.9rem;
    }
    
    .call-me-btn {
        padding: 0.85rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .phone-disclaimer {
        font-size: 0.7rem !important;
    }
    
    .status-icon {
        width: 50px;
        height: 50px;
    }
    
    .status-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .status-message {
        font-size: 0.95rem !important;
    }
    
    .role-carousel {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    .role-card {
        padding: 1rem;
    }
    
    .role-avatar {
        width: 38px;
        height: 38px;
    }
    
    .role-avatar svg {
        width: 18px;
        height: 18px;
    }
    
    .role-identity h4 {
        font-size: 0.85rem;
    }
    
    .role-objection-box p {
        font-size: 0.75rem;
    }
    
    .wave-ring {
        display: none;
    }
    
    .siri-canvas {
        height: 300px;
    }
}

/* Dashboard Preview Section */
.dashboard-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, #0a0a1a 0%, #0d0d24 100%);
    position: relative;
    overflow: hidden;
}

.dashboard-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.dashboard-header h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.dashboard-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.dashboard-preview-container {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 3rem;
}

.dashboard-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    min-height: 650px;
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}

/* Animated gradient border */
.animated-border-wrapper {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(90deg, 
        rgba(255, 2, 131, 0.3), 
        rgba(139, 92, 246, 0.3), 
        rgba(6, 182, 212, 0.3), 
        rgba(16, 185, 129, 0.3),
        rgba(255, 2, 131, 0.3)
    );
    background-size: 300% 100%;
    animation: gradient-shift 4s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Traveling light orb */
.animated-border-wrapper::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 2, 131, 0.8) 0%, rgba(139, 92, 246, 0.6) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: orb-travel 8s linear infinite;
}

@keyframes orb-travel {
    0% {
        top: -40px;
        left: 10%;
    }
    25% {
        top: -40px;
        left: 90%;
    }
    25.1% {
        top: -40px;
        left: 90%;
    }
    50% {
        top: calc(100% - 40px);
        left: 90%;
    }
    50.1% {
        top: calc(100% - 40px);
        left: 90%;
    }
    75% {
        top: calc(100% - 40px);
        left: 10%;
    }
    75.1% {
        top: calc(100% - 40px);
        left: 10%;
    }
    100% {
        top: -40px;
        left: 10%;
    }
}

/* Second orb with delay */
.animated-border-wrapper::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.8) 0%, rgba(16, 185, 129, 0.6) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(15px);
    animation: orb-travel 8s linear infinite;
    animation-delay: -4s;
}

.animated-border-svg {
    display: none;
}

.border-path, .border-glow {
    display: none;
}

.dashboard-content {
    position: relative;
    z-index: 2;
    min-height: 650px;
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
    border-radius: 18px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Dashboard Sidebar */
.dash-sidebar {
    width: 70px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-radius: 18px 0 0 18px;
    flex-shrink: 0;
}

.sidebar-logo {
    margin-bottom: 1.5rem;
}

.sidebar-logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff0283 0%, #ff3d9a 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: white;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-item svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

.sidebar-item:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-item.active {
    color: #ff0283;
    border-left-color: #ff0283;
    background: rgba(255, 2, 131, 0.1);
}

/* Disabled sidebar items (demo mode) */
.sidebar-item:not([data-page="dashboard"]) {
    opacity: 0.4;
    cursor: not-allowed;
}

.sidebar-item:not([data-page="dashboard"]):hover {
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

.sidebar-item.active svg {
    stroke: #ff0283;
}

/* Main Dashboard Area */
.dash-main {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow: hidden;
}

/* Dashboard Header */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dash-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff0283 0%, #d4006a 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.dash-logo-text {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 1rem;
}

.dash-date {
    color: #666;
    font-size: 0.85rem;
}

/* Stats Row */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.dash-stat-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.dash-stat-card:hover {
    border-color: rgba(255, 2, 131, 0.2);
    box-shadow: 0 4px 20px rgba(255, 2, 131, 0.1);
}

.dash-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
}

.dash-stat-label {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.dash-stat-change {
    font-size: 0.75rem;
    font-weight: 500;
}

.dash-stat-change.positive {
    color: #10b981;
}

.dash-stat-change.neutral {
    color: #666;
}

/* Chart Area */
.dash-chart-area {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
}

.dash-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dash-chart-header h4 {
    color: #1a1a2e;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.dash-chart-tabs {
    display: flex;
    gap: 0.5rem;
}

.dash-chart-tabs span {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dash-chart-tabs span.active {
    background: linear-gradient(135deg, #ff0283 0%, #d4006a 100%);
    color: #fff;
}

.dash-chart {
    height: 200px;
    display: flex;
    align-items: flex-end;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.chart-bar {
    flex: 1;
    height: var(--height);
    background: linear-gradient(180deg, rgba(255, 2, 131, 0.2) 0%, rgba(255, 2, 131, 0.1) 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: all 0.3s ease;
}

.chart-bar:hover {
    background: linear-gradient(180deg, rgba(255, 2, 131, 0.4) 0%, rgba(255, 2, 131, 0.2) 100%);
}

.chart-bar.active {
    background: linear-gradient(180deg, #ff0283 0%, #d4006a 100%);
}

.chart-bar span {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #999;
}

/* Flow Funnel */
.dash-flow-funnel {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#sankey-chart {
    width: 100%;
}

#sankey-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

#sankey-chart text {
    fill: #374151;
    font-family: inherit;
}

.flow-funnel-img {
    width: 100%;
    max-width: 900px;
    height: auto;
    object-fit: contain;
}

/* Recent Activity */
.dash-activity {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
}

.dash-activity h4 {
    color: #1a1a2e;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.dash-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 8px;
}

.activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.activity-icon.success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.activity-icon.pending {
    background: rgba(255, 2, 131, 0.15);
    color: #ff0283;
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.activity-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.activity-title {
    font-size: 0.85rem;
    color: #1a1a2e;
    font-weight: 500;
}

.activity-time {
    font-size: 0.7rem;
    color: #999;
}

/* Dashboard Pages */
.dash-page {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    animation: pageIn 0.3s ease;
}

.dash-page.active {
    display: flex;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Activity Page */
.activity-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: #ff0283;
    color: #ff0283;
}

.filter-btn.active {
    background: #ff0283;
    border-color: #ff0283;
    color: #fff;
}

.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fafafa;
    border-radius: 12px;
    border-left: 3px solid transparent;
}

.timeline-item:hover {
    background: #f5f5f5;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.timeline-desc {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.timeline-time {
    font-size: 0.75rem;
    color: #9ca3af;
}

.timeline-status {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.timeline-status.recovered {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.timeline-status.pending {
    background: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
}

.timeline-status.active {
    background: rgba(255, 2, 131, 0.1);
    color: #ff0283;
}

.timeline-status.scheduled {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

/* Agent Page */
.agent-status-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-radius: 16px;
    color: #fff;
}

.agent-avatar {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff0283 0%, #ff3d9a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.agent-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.agent-info p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.agent-status-badge {
    margin-left: auto;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.agent-status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.agent-settings {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
}

.agent-settings h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label span:first-child {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    color: #1f2937;
}

.setting-value {
    font-size: 0.75rem;
    color: #9ca3af;
}

.setting-toggle {
    width: 44px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.setting-toggle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.setting-toggle.on {
    background: #ff0283;
}

.setting-toggle.on::after {
    transform: translateX(20px);
}

/* Insights Page */
.insights-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.insight-metric {
    padding: 1.25rem;
    background: #fafafa;
    border-radius: 12px;
    text-align: center;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.metric-label {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.top-objections {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
}

.top-objections h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.objection-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.objection-label {
    width: 120px;
    font-size: 0.8rem;
    color: #4b5563;
}

.objection-progress {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.objection-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0283 0%, #ff3d9a 100%);
    border-radius: 4px;
}

.objection-percent {
    width: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}

/* Account Page */
.account-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #fdf2f8 100%);
    border-radius: 16px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff0283 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.profile-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: #1f2937;
}

.profile-info p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.plan-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #ff0283 0%, #ff3d9a 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.account-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
}

.account-section h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.billing-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

.billing-row span:first-child {
    color: #6b7280;
}

.billing-value {
    font-weight: 500;
    color: #1f2937;
}

.integration-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.integration-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: #e5e7eb;
    color: #6b7280;
    cursor: pointer;
}

.integration-item.connected .integration-status {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Corner Glow Effects */
.corner-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.7;
    pointer-events: none;
    animation: corner-pulse 4s ease-in-out infinite alternate;
}

.corner-glow.top-left {
    top: -50px;
    left: -50px;
    background: var(--primary);
}

.corner-glow.top-right {
    top: -50px;
    right: -50px;
    background: #8b5cf6;
    animation-delay: 1s;
}

.corner-glow.bottom-left {
    bottom: -50px;
    left: -50px;
    background: #06b6d4;
    animation-delay: 2s;
}

.corner-glow.bottom-right {
    bottom: -50px;
    right: -50px;
    background: #10b981;
    animation-delay: 3s;
}

@keyframes corner-pulse {
    0% {
        opacity: 0.5;
        transform: scale(0.85);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

/* Dashboard Mobile */
@media (max-width: 768px) {
    .dashboard-section {
        padding: 4rem 1rem;
    }
    
    .dashboard-header h2 {
        font-size: 2rem;
    }
    
    .dashboard-header p {
        font-size: 0.95rem;
    }
    
    .dashboard-preview-container {
        padding: 1.5rem;
    }
    
    .dashboard-card {
        min-height: auto;
        border-radius: 16px;
    }
    
    .dashboard-content {
        min-height: auto;
        border-radius: 14px;
        flex-direction: column;
    }
    
    .dash-flow-funnel {
        padding: 0.75rem;
    }
    
    .dash-sidebar {
        width: 100%;
        flex-direction: row;
        padding: 0.75rem 1rem;
        border-radius: 14px 14px 0 0;
        justify-content: space-between;
    }
    
    .sidebar-logo {
        margin-bottom: 0;
    }
    
    .sidebar-logo-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .sidebar-nav {
        flex-direction: row;
        width: auto;
        gap: 0;
    }
    
    .sidebar-item {
        padding: 0.5rem 0.75rem;
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    
    .sidebar-item span {
        display: none;
    }
    
    .sidebar-item svg {
        width: 18px;
        height: 18px;
    }
    
    .sidebar-item.active {
        border-left-color: transparent;
        border-bottom-color: #ff0283;
    }
    
    .dash-main {
        padding: 1rem;
    }
    
    .dash-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .dash-stat-value {
        font-size: 1.25rem;
    }
    
    .dash-chart {
        height: 150px;
    }
    
    .chart-bars {
        gap: 0.5rem;
    }
    
    .animated-border-wrapper {
        border-radius: 16px;
    }
    
    .animated-border-wrapper::before {
        width: 80px;
        height: 80px;
        filter: blur(15px);
    }
    
    .animated-border-wrapper::after {
        width: 60px;
        height: 60px;
        filter: blur(12px);
    }
    
    .corner-glow {
        width: 120px;
        height: 120px;
        filter: blur(50px);
    }
}

/* Dashboard Large Screens */
@media (min-width: 1400px) {
    .dashboard-preview-container {
        max-width: 1400px;
    }
    
    .dashboard-card {
        min-height: 700px;
    }
    
    .dashboard-content {
        min-height: 700px;
    }
    
    .dash-main {
        padding: 3rem;
    }
    
    .corner-glow {
        width: 250px;
        height: 250px;
        filter: blur(100px);
    }
}

/* Insights Section */
.insights-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, #0d0d24 0%, #0a0a1a 50%, #0d0d24 100%);
    position: relative;
    overflow: hidden;
}

/* Stage Lights */
.stage-light {
    position: absolute;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

.stage-light-left {
    left: 0;
}

.stage-light-right {
    right: 0;
}

.light-source {
    display: none;
}

.light-beam {
    position: absolute;
    top: 0;
    width: 500px;
    height: 550px;
}

.stage-light-left .light-beam {
    left: 0;
    background: linear-gradient(
        160deg,
        rgba(139, 92, 246, 0.7) 0%,
        rgba(139, 92, 246, 0.4) 30%,
        rgba(139, 92, 246, 0.15) 60%,
        transparent 100%
    );
    clip-path: polygon(0% 0%, 0% 30%, 70% 100%, 30% 100%);
}

.stage-light-right .light-beam {
    right: 0;
    background: linear-gradient(
        200deg,
        rgba(255, 2, 131, 0.7) 0%,
        rgba(255, 2, 131, 0.4) 30%,
        rgba(255, 2, 131, 0.15) 60%,
        transparent 100%
    );
    clip-path: polygon(100% 0%, 100% 30%, 30% 100%, 70% 100%);
}

.insights-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.insights-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 2, 131, 0.1);
    border: 1px solid rgba(255, 2, 131, 0.3);
    border-radius: 50px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.insights-header h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.insights-header p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1300px;
    margin: 0 auto;
    border-radius: 0;
    position: relative;
}

/* Grid lines container */
.insights-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 33.333%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(255, 2, 131, 0.4) 20%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(6, 182, 212, 0.4) 80%,
        transparent 100%
    );
}

.insights-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 66.666%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(6, 182, 212, 0.4) 20%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(255, 2, 131, 0.4) 80%,
        transparent 100%
    );
}

/* Horizontal line */
.insights-grid-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 2, 131, 0.4) 15%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(6, 182, 212, 0.4) 85%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 5;
}

/* Traveling dots */
.grid-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    filter: blur(1px);
    z-index: 10;
    pointer-events: none;
}

.grid-dot-1 {
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
    animation: dot-vertical-1 6s ease-in-out infinite;
    left: calc(33.333% - 4px);
}

.grid-dot-2 {
    background: #8b5cf6;
    box-shadow: 0 0 10px #8b5cf6, 0 0 20px #8b5cf6;
    animation: dot-vertical-2 6s ease-in-out infinite;
    animation-delay: -3s;
    left: calc(66.666% - 4px);
}

.grid-dot-3 {
    background: #06b6d4;
    box-shadow: 0 0 10px #06b6d4, 0 0 20px #06b6d4;
    animation: dot-horizontal 8s ease-in-out infinite;
    top: calc(50% - 4px);
}

@keyframes dot-vertical-1 {
    0%, 100% {
        top: 5%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    95%, 100% {
        top: 95%;
        opacity: 0;
    }
}

@keyframes dot-vertical-2 {
    0%, 100% {
        top: 95%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    95%, 100% {
        top: 5%;
        opacity: 0;
    }
}

@keyframes dot-horizontal {
    0%, 100% {
        left: 2%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    95%, 100% {
        left: 98%;
        opacity: 0;
    }
}

.insight-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
}

.insight-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.insight-card.featured {
    background: transparent;
}

.insight-card.featured:hover {
    background: rgba(255, 2, 131, 0.05);
}

.insight-card.alert {
    background: transparent;
}

.insight-card.alert:hover {
    background: rgba(245, 158, 11, 0.05);
}

.insight-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.insight-icon svg {
    width: 24px;
    height: 24px;
}

.insight-icon.revenue {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.insight-icon.intent {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.insight-icon.ux {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.insight-icon.trust {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.insight-icon.emotional {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.insight-icon.objection {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.insight-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.insight-card > p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

/* Insight List */
.insight-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-list li {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insight-list li:last-child {
    border-bottom: none;
}

.insight-list .metric {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Intent Bars */
.intent-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.intent-bar {
    display: grid;
    grid-template-columns: 120px 1fr 40px;
    align-items: center;
    gap: 0.75rem;
}

.intent-bar span:first-child {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.intent-bar .bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.intent-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    border-radius: 4px;
}

.intent-bar .percent {
    font-size: 0.75rem;
    color: #8b5cf6;
    font-weight: 600;
    text-align: right;
}

/* UX Issues */
.ux-issues {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ux-issue {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.ux-issue .issue-icon {
    font-size: 0.9rem;
}

.ux-issue span:nth-child(2) {
    flex: 1;
}

.ux-issue .issue-count {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
}

/* Trust Quotes */
.trust-quotes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trust-quote {
    padding: 0.6rem 0.75rem;
    background: rgba(59, 130, 246, 0.08);
    border-left: 2px solid #3b82f6;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

/* Emotional Tags */
.emotional-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.emotion-tag {
    padding: 0.4rem 0.75rem;
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.insight-note {
    font-size: 0.8rem !important;
    color: #ec4899 !important;
    font-weight: 500;
    margin-bottom: 0 !important;
}

/* Objection Alert */
.objection-alert {
    background: rgba(245, 158, 11, 0.08);
    border-radius: 10px;
    padding: 1rem;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.alert-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f59e0b;
}

.alert-percent {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.alert-text {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alert-action {
    font-size: 0.85rem;
    color: #10b981;
    font-weight: 500;
}

/* Insights Bottom */
.insights-bottom {
    max-width: 1300px;
    margin: 3rem auto 0;
    text-align: center;
}

.insights-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Insights Mobile */
@media (max-width: 1100px) {
    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .insights-grid::before {
        left: 50%;
    }
    
    .insights-grid::after {
        display: none;
    }
    
    .grid-dot-1 {
        left: calc(50% - 4px);
    }
    
    .grid-dot-2 {
        display: none;
    }
    
    .insights-grid-line {
        display: none;
    }
    
    .grid-dot-3 {
        display: none;
    }
}

@media (max-width: 768px) {
    .insights-section {
        padding: 4rem 1rem;
    }
    
    .insights-header h2 {
        font-size: 2rem;
    }
    
    .insights-header p {
        font-size: 1rem;
    }
    
    .insights-grid {
        grid-template-columns: 1fr;
    }
    
    .insights-grid::before,
    .insights-grid::after {
        display: none;
    }
    
    .grid-dot-1,
    .grid-dot-2,
    .grid-dot-3 {
        display: none;
    }
    
    .insight-card {
        padding: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .insight-card:last-child {
        border-bottom: none;
    }
    
    .intent-bar {
        grid-template-columns: 100px 1fr 35px;
    }
}

/* Global Languages Section */
.global-section {
    padding: 8rem 4rem;
    background: linear-gradient(180deg, var(--light) 0%, #f0f4ff 50%, var(--light) 100%);
    overflow: hidden;
}

.global-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}

/* Globe Container */
.globe-container {
    position: relative;
    flex-shrink: 0;
}

.globe {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.globe-sphere {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(0, 40, 80, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, #1e90ff 0%, #00bfff 25%, #20b2aa 50%, #3cb371 75%, #2e8b57 100%);
    box-shadow: 
        inset -30px -30px 60px rgba(0, 20, 60, 0.4),
        inset 15px 15px 40px rgba(255, 255, 255, 0.35),
        0 0 60px rgba(30, 144, 255, 0.5),
        0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.globe-sphere::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='100' rx='95' ry='95' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cellipse cx='100' cy='100' rx='95' ry='60' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Cellipse cx='100' cy='100' rx='95' ry='30' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cellipse cx='100' cy='100' rx='60' ry='95' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Cellipse cx='100' cy='100' rx='30' ry='95' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='5' y1='100' x2='195' y2='100' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='100' y1='5' x2='100' y2='195' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3C/svg%3E");
    animation: globeSpin 25s linear infinite;
}

.globe-sphere::after {
    display: none;
}

.globe-grid {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
}

.globe-grid::before {
    display: none;
}

.globe-grid::after {
    display: none;
}

.globe-highlight {
    position: absolute;
    width: 65px;
    height: 45px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70%);
    top: 30px;
    left: 80px;
    pointer-events: none;
    filter: blur(1px);
}

@keyframes globeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Orbiting Language Dots */
.language-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbitSpin 30s linear infinite;
}

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

.lang-dot {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: langPulse 3s ease-in-out infinite;
    animation-delay: var(--delay);
}

.lang-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.lang-dot:nth-child(2) { top: 15%; right: 8%; }
.lang-dot:nth-child(3) { top: 50%; right: -5%; transform: translateY(-50%); }
.lang-dot:nth-child(4) { bottom: 15%; right: 8%; }
.lang-dot:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); }
.lang-dot:nth-child(6) { bottom: 15%; left: 8%; }
.lang-dot:nth-child(7) { top: 50%; left: -5%; transform: translateY(-50%); }
.lang-dot:nth-child(8) { top: 15%; left: 8%; }

.lang-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dark);
    animation: counterSpin 30s linear infinite;
}

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

@keyframes langPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
    50% { transform: scale(1.1); box-shadow: 0 6px 30px rgba(255, 2, 131, 0.3); }
}

/* Pulse Rings */
.pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: pulseOut 3s ease-out infinite;
}

.pulse-ring.ring-1 {
    width: 220px;
    height: 220px;
    animation-delay: 0s;
}

.pulse-ring.ring-2 {
    width: 260px;
    height: 260px;
    animation-delay: 1s;
}

.pulse-ring.ring-3 {
    width: 300px;
    height: 300px;
    animation-delay: 2s;
}

@keyframes pulseOut {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Global Text */
.global-text {
    max-width: 500px;
}

.global-text h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--dark);
}

.global-text h2 .highlight {
    color: var(--primary);
    font-style: italic;
}

.global-subtitle {
    font-size: 1.15rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.language-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lang-tag {
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.lang-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 2, 131, 0.2);
    color: var(--primary);
}

.lang-tag-more {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Section Connector */
.section-connector {
    position: relative;
    height: 80px;
    background: linear-gradient(180deg, #f0f4ff 0%, var(--light) 100%);
    overflow: hidden;
}

.connector-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flow-path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.flow-path.flow-1 {
    stroke: var(--primary);
    opacity: 0.4;
    stroke-dasharray: 12 8;
    animation: flowRight 2s linear infinite;
}

.flow-path.flow-2 {
    stroke: #00bfff;
    opacity: 0.3;
    stroke-dasharray: 8 12;
    animation: flowRight 3s linear infinite;
}

@keyframes flowRight {
    0% { stroke-dashoffset: 40; }
    100% { stroke-dashoffset: 0; }
}

.connector-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle-cart {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 50%;
    transform: translateY(-50%);
    animation: cartMove 5s ease-in-out infinite;
}

.particle-cart svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.particle-cart.p1 { left: -40px; animation-delay: 0s; color: var(--primary); }
.particle-cart.p2 { left: -40px; animation-delay: 1s; color: #00bfff; }
.particle-cart.p3 { left: -40px; animation-delay: 2s; color: #22c55e; }
.particle-cart.p4 { left: -40px; animation-delay: 3s; color: #f59e0b; }
.particle-cart.p5 { left: -40px; animation-delay: 4s; color: #8b5cf6; }

@keyframes cartMove {
    0% {
        left: -40px;
        opacity: 0;
        transform: translateY(-50%) scale(0.6) rotate(-10deg);
    }
    8% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translateY(calc(-50% - 12px)) scale(1.1) rotate(5deg);
    }
    50% {
        transform: translateY(calc(-50% + 12px)) scale(1) rotate(-5deg);
    }
    75% {
        transform: translateY(calc(-50% - 8px)) scale(1.1) rotate(3deg);
    }
    92% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
    100% {
        left: calc(100% + 40px);
        opacity: 0;
        transform: translateY(-50%) scale(0.6) rotate(10deg);
    }
}

@media (max-width: 768px) {
    .section-connector {
        height: 60px;
    }
    
    .particle-cart {
        width: 20px;
        height: 20px;
    }
}

/* Global Section Mobile */
@media (max-width: 900px) {
    .global-section {
        padding: 5rem 2rem;
    }
    
    .global-content {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }
    
    .globe {
        width: 260px;
        height: 260px;
    }
    
    .globe-sphere,
    .globe-grid {
        width: 160px;
        height: 160px;
    }
    
    .globe-highlight {
        width: 55px;
        height: 40px;
        top: 20px;
        left: 60px;
    }
    
    .lang-dot {
        width: 36px;
        height: 36px;
    }
    
    .lang-label {
        font-size: 0.65rem;
    }
    
    .pulse-ring.ring-1 { width: 180px; height: 180px; }
    .pulse-ring.ring-2 { width: 210px; height: 210px; }
    .pulse-ring.ring-3 { width: 240px; height: 240px; }
    
    .global-text h2 {
        font-size: 2.2rem;
    }
    
    .global-subtitle {
        font-size: 1rem;
    }
    
    .language-tags {
        justify-content: center;
    }
}