/* Enhanced TreinAI Styles - Corporate & Dynamic */
:root {
    /* Refined Palette - Premium & Deep */
    --primary-glow: #10b981;
    /* Emerald */
    --primary-dim: rgba(16, 185, 129, 0.1);
    --secondary-glow: #818cf8;
    /* Soft Indigo */
    --accent-glow: #fbbf24;
    /* Warm Amber */

    --bg-dark: #020408;
    --bg-panel: rgba(255, 255, 255, 0.03);
    --border-light: rgba(255, 255, 255, 0.08);

    --primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --glass-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    --dark-gradient: linear-gradient(to bottom, #020408, #0f172a);

    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark-gradient);
    color: white;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

.cta-assinar {
    /* Existing styles */
    background: var(--primary-gradient);
    color: white;
    /* Ensure text is white */
    border: 1px solid var(--primary-glow);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    /* Subtle glow effect */

    /* New styles for rounding and spacing */
    border-radius: 999px;
    /* Makes the button fully rounded (pill shape) */
    padding: 10px 25px;
    /* Adjust padding to make the text fit comfortably inside */
    display: inline-block;
    /* Ensures padding and border-radius work as expected, especially if it's a link (<a>) */
}

.cta-assinar:hover {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    transform: translateY(-1px);
    box-shadow: 0 0 15px var(--primary-glow);
}

/* Update login button to match the cta-assinar style but use a secondary (purple) theme */
#login-button {
    /* Use the secondary (purple) gradient */
    background: var(--secondary-gradient);
    color: white;
    /* Use the secondary glow color for the border */
    border: 1px solid var(--secondary-glow);
    /* Apply the same rounding and padding as .cta-assinar */
    border-radius: 999px;
    padding: 10px 25px;
    display: inline-block;
    /* Create a purple shadow for the glow effect */
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    /* Add transition for smoothness */
}

#login-button:hover {
    /* Reverse the secondary gradient on hover, similar to .cta-assinar:hover */
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    /* Lift the button and enhance the purple glow */
    transform: translateY(-1px);
    box-shadow: 0 0 15px var(--secondary-glow);
}

/* Style for the subscription button to match login button */
/* Style for the subscription button to match login button */
.subscribe-button {
    background: var(--primary-gradient);
    color: white;
    border: 1px solid var(--primary-glow);
    border-radius: 999px;
    padding: 10px 25px;
    display: inline-block;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.subscribe-button:hover {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    transform: translateY(-1px);
    box-shadow: 0 0 15px var(--primary-glow);
}

.subscribe-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Enhanced background with neural network pattern and subtle story effect */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.04), transparent 60%),
        /* Slightly reduced opacity */
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.03), transparent 60%),
        /* Slightly reduced opacity */
        radial-gradient(circle at 40% 80%, rgba(245, 158, 11, 0.03), transparent 60%),
        /* Slightly reduced opacity */
        radial-gradient(circle at 90% 60%, rgba(16, 185, 129, 0.02), transparent 60%),
        /* Slightly reduced opacity */
        radial-gradient(ellipse at 60% 30%, rgba(99, 102, 241, 0.04), transparent 70%),
        /* Slightly reduced opacity */
        radial-gradient(ellipse at 10% 80%, rgba(245, 158, 11, 0.02), transparent 70%);
    /* Slightly reduced opacity */
    background-size: 150% 150%;
    /* Make background larger for more movement range */
    animation: moveGlow 90s linear infinite;
    /* Increased duration for slower, more subtle movement */
    pointer-events: none;
    z-index: 0;
}

.neural-network-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 40px 60px, rgba(16, 185, 129, 0.1), transparent),
        radial-gradient(2px 2px at 120px 120px, rgba(99, 102, 241, 0.08), transparent),
        radial-gradient(1px 1px at 200px 200px, rgba(245, 158, 11, 0.06), transparent);
    background-size: 240px 240px, 360px 360px, 480px 480px;
    animation: neural-pulse 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Starry background effect */
.starry-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 50px 70px, white, transparent),
        radial-gradient(1px 1px at 150px 100px, white, transparent),
        radial-gradient(0.5px 0.5px at 200px 250px, white, transparent),
        radial-gradient(1.5px 1.5px at 300px 50px, white, transparent),
        radial-gradient(1px 1px at 350px 300px, white, transparent),
        radial-gradient(0.5px 0.5px at 450px 150px, white, transparent),
        radial-gradient(1.2px 1.2px at 500px 20px, white, transparent),
        radial-gradient(1px 1px at 600px 200px, white, transparent),
        radial-gradient(0.8px 0.8px at 700px 120px, white, transparent),
        radial-gradient(1.1px 1.1px at 800px 350px, white, transparent),
        radial-gradient(0.9px 0.9px at 900px 80px, white, transparent),
        radial-gradient(1.3px 1.3px at 1000px 280px, white, transparent),
        radial-gradient(0.7px 0.7px at 1100px 190px, white, transparent),
        radial-gradient(1px 1px at 1200px 310px, white, transparent),
        radial-gradient(0.6px 0.6px at 1300px 60px, white, transparent),
        radial-gradient(1.4px 1.4px at 1400px 240px, white, transparent),
        /* Added more stars here */
        radial-gradient(0.8px 0.8px at 100px 400px, white, transparent),
        radial-gradient(1.1px 1.1px at 750px 450px, white, transparent),
        radial-gradient(0.6px 0.6px at 150px 150px, white, transparent),
        radial-gradient(1.0px 1.0px at 950px 10px, white, transparent),
        radial-gradient(0.7px 0.7px at 250px 550px, white, transparent),
        radial-gradient(1.2px 1.2px at 1150px 600px, white, transparent),
        radial-gradient(0.9px 0.9px at 50px 250px, white, transparent),
        radial-gradient(1.3px 1.3px at 400px 700px, white, transparent),
        radial-gradient(0.5px 0.5px at 1350px 350px, white, transparent),
        radial-gradient(1.0px 1.0px at 650px 500px, white, transparent);
    background-size: 1500px 1500px;
    /* Adjust as needed for distribution */
    animation: twinkle 50s linear infinite;
    pointer-events: none;
    z-index: 0;
    /* Should be behind neural network but above main background */
    opacity: 0.7;
    /* Subtle starry effect */
}

@keyframes twinkle {

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

    25% {
        opacity: 0.8;
        transform: scale(1.01);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.99);
    }

    75% {
        opacity: 0.9;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}


@keyframes moveGlow {
    0% {
        background-position: 0% 0%;
        transform: rotate(0deg) scale(1);
    }

    25% {
        background-position: 100% 50%;
        transform: rotate(90deg) scale(1.02);
    }

    50% {
        background-position: 0% 100%;
        transform: rotate(180deg) scale(1);
    }

    75% {
        background-position: 50% 0%;
        transform: rotate(270deg) scale(1.02);
    }

    100% {
        background-position: 0% 0%;
        transform: rotate(360deg) scale(1);
    }
}

@keyframes neural-pulse {

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

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
    background-clip: text;
    -webkit-background-clip: text;
    /* For Safari & some Chrome versions */
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Ensures proper rendering in WebKit */
    display: inline-block;
}


/* Typing effect */
.typing-effect::after {
    content: '|';
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Custom CTA buttons */
.cta-primary {
    background: var(--primary-gradient);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.cta-secondary {
    background: transparent;
    border: 2px solid var(--secondary-glow);
    color: var(--secondary-glow);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: background 0.3s, color 0.3s;
}

.cta-secondary:hover {
    background: var(--secondary-glow);
    color: white;
}

/* Animated cards */
.animated-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(8px);
}

.animated-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* New style for the award display card */
.award-glow-card {
    position: relative;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.05), rgba(245, 158, 11, 0.04));
    /* A subtle, multi-color gradient background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 2rem;
    /* Slightly more padding */
    border-radius: 1.5rem;
    /* More rounded */
    backdrop-filter: blur(12px);
    /* Stronger blur */
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.1), 0 0 20px rgba(99, 102, 241, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.05);
    /* Multi-color subtle glow and inner shadow */
    transition: all 0.4s ease-in-out;
    /* Smoother transition */
    overflow: hidden;
    /* For pseudo-element effects */
    max-width: 400px;
    /* Keep it constrained */
    width: 100%;
    /* Ensure it takes full width within max-width */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.award-glow-card:hover {
    transform: perspective(800px) rotateY(2deg) scale(1.03);
}


/* Add a subtle animated border or light effect */
.award-glow-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(16, 185, 129, 0.3) 10%, transparent 20%, rgba(99, 102, 241, 0.3) 30%, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%, rgba(16, 185, 129, 0.3) 70%, transparent 80%);
    border-radius: 1.5rem;
    animation: rotateBorder 10s linear infinite;
    z-index: -1;
    opacity: 0.3;
    /* Subtle glow */
}

@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }

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

/* Skill tags */
.skill-tag {
    display: inline-block;
    background: var(--neural-gradient);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form inputs */
.form-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Carousel navigation dots */
.testimonial-nav .nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
    cursor: pointer;
    transition: background 0.3s;
}

.testimonial-nav .nav-dot.active {
    background: var(--primary-glow);
}

/* Floating keywords animation */
.floating-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.keyword {
    background: var(--neural-gradient);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

/* Fade-in bottom animation */
.fade-in-bottom {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInBottom 1s ease-out forwards;
}

@keyframes fadeInBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Social icons */
.social-icon svg {
    stroke: white;
    transition: stroke 0.3s ease;
}

.social-icon:hover svg {
    stroke: var(--primary-glow);
}

/* Scroll arrow hover */
.scroll-arrow svg:hover {
    stroke: var(--primary-glow);
}

/* Premium Utilities */
.glass-panel {
    background: var(--glass-gradient);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-secondary {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Premium Badges */
.badge-premium {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.badge-premium.ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* Premium Buttons */
.btn-primary {
    background: var(--primary-gradient);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Section Spacing */
.section-spacing {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Removed mask-image-linear-to-b to prevent clipping */

/* Testimonial specific styles */
.testimonial-carousel {
    position: relative;
    overflow: visible;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(8px);
    text-align: center;
    display: none;
}

.testimonial-card.active {
    display: block;
}

.nav-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 50%;
    transition: background 0.3s;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Adjust positioning of arrows for different screen sizes */
.nav-arrow-left {
    left: -4rem;
}

.nav-arrow-right {
    right: -4rem;
}

/* Adjust for smaller screens */
@media (max-width: 1024px) {
    .nav-arrow-left {
        left: 0.5rem;
    }

    .nav-arrow-right {
        right: 0.5rem;
    }
}

/* --- How It Works preview --- */
.eyebrow {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
}

.hiw-shell {
    position: relative;
    overflow: hidden;
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(10, 12, 20, 0.92));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.hiw-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.12), transparent 45%),
        radial-gradient(circle at 80% 10%, rgba(99, 102, 241, 0.1), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.hiw-head {
    display: grid;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.hiw-steps-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.hiw-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(16, 185, 129, 0.04));
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hiw-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1.1rem;
}

.hiw-cta-button {
    position: relative;
    padding: 0.95rem 1.25rem;
    border-radius: 9999px;
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.28), 0 0 0 6px rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hiw-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 45px rgba(16, 185, 129, 0.35), 0 0 0 8px rgba(16, 185, 129, 0.16);
    background: linear-gradient(135deg, #0ea5e9, #10b981);
}

.hiw-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.3);
}

.hiw-card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #a7f3d0;
    border-radius: 9999px;
    font-weight: 800;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.08);
}

.how-step-card {
    display: flex;
    gap: 12px;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.95rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Builder Step Animation Fix */
.builder-step {
    opacity: 0.4;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.builder-step.active {
    opacity: 1;
    transform: translateX(4px);
}

/* Live Demo Improvements */
.scenario-pill {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.scenario-pill:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
}

.scenario-pill.active {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05);
}

.demo-sidebar {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.how-demo-card {
    background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.1), transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(99, 102, 241, 0.08), transparent 50%),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.2rem;
    padding: 1.25rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
}

.orbs-row {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0 0.75rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scenario-switch {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

.pill-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

/* Premium Demo Chat Styles */
.demo-msg {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-start;
    animation: fadeIn 0.3s ease-out forwards;
}

.demo-msg.user {
    flex-direction: row-reverse;
}

.demo-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.demo-avatar.user {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-avatar.ai {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    max-width: 80%;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-msg.user .demo-bubble {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top-right-radius: 0.25rem;
    color: #e5e7eb;
}

.demo-msg.ai .demo-bubble {
    background: rgba(79, 70, 229, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-top-left-radius: 0.25rem;
    color: #e0e7ff;
}

.demo-word {
    animation: fadeIn 0.1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scenario-pill {
    padding: 0.48rem 0.95rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.scenario-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(16, 185, 129, 0.35);
}

.scenario-pill.active {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    color: white;
    border-color: rgba(16, 185, 129, 0.8);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

.feedback-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
}

.feedback-card {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
}

.score-badge {
    width: 96px;
    height: 96px;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.16), rgba(14, 165, 233, 0.16));
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

.score-number {
    font-size: 2rem;
    font-weight: 800;
    color: #d1fae5;
    display: block;
    line-height: 1.1;
}

.score-label {
    font-size: 0.8rem;
    color: #cbd5e1;
}

.feedback-body {
    display: grid;
    gap: 0.65rem;
}

.feedback-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-start;
}

.mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.75rem;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #a7f3d0;
    white-space: nowrap;
}

.mini-chip.ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

.rubric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.rubric-item {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
}

.rubric-label {
    font-weight: 700;
    color: #e2e8f0;
    display: block;
}

.rubric-score {
    font-weight: 800;
    display: block;
    margin-top: 0.1rem;
}

.rubric-score.good {
    color: #a7f3d0;
}

.rubric-score.warn {
    color: #fcd34d;
}

.rubric-note {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.feedback-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.timeline-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
}

.timeline {
    display: grid;
    gap: 0.85rem;
}

.timeline-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    margin-top: 0.2rem;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.03);
}

.dot.good {
    background: #22c55e;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.16);
}

.dot.warn {
    background: #f59e0b;
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.16);
}

.timeline-title {
    font-weight: 700;
    color: #e2e8f0;
}

.timeline-note {
    color: #cbd5e1;
    font-size: 0.95rem;
}

.feedback-inline {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.4rem;
    align-items: stretch;
}

@media (max-width: 960px) {
    .feedback-inline {
        grid-template-columns: 1fr;
    }
}

.feedback-preview-grid {
    display: grid;
    gap: 1.35rem;
}

.feedback-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.feedback-preview-body {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .feedback-preview-body {
        grid-template-columns: 1fr;
    }

    .feedback-preview-head {
        flex-direction: column;
    }
}

.preview-summary-card,
.preview-criteria-card {
    padding: 1.15rem;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
}

.preview-summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.summary-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.meta-box {
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.meta-label {
    color: #cbd5e1;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.meta-value {
    color: #e2e8f0;
    font-weight: 700;
    margin-top: 0.2rem;
}

.preview-criteria-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.preview-criteria-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.feedback-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.score-stack {
    display: grid;
    gap: 0.9rem;
    align-items: start;
    max-width: 320px;
}

.score-circle {
    position: relative;
    width: 152px;
    height: 152px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    --score-deg: 0deg;
    --score-color: #10b981;
}

.score-circle::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 9999px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05);
}

.score-circle::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: conic-gradient(var(--score-color) 0deg,
            var(--score-color) var(--score-deg),
            rgba(255, 255, 255, 0.08) var(--score-deg),
            rgba(255, 255, 255, 0.08) 360deg);
    mask: radial-gradient(circle at center, transparent 60%, black 64%);
    -webkit-mask: radial-gradient(circle at center, transparent 60%, black 64%);
    pointer-events: none;
}

.score-circle .score-inner {
    width: 100%;
    padding: 0.2rem 0;
}

.score-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.score-value {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #f8fafc;
    display: block;
    line-height: 1.05;
}

.score-suffix {
    display: inline-block;
    color: #cbd5e1;
    font-weight: 700;
    margin-left: 0.1rem;
    vertical-align: baseline;
}

.score-tag {
    display: block;
    font-size: 0.9rem;
    color: #cbd5e1;
    letter-spacing: 0.02em;
    margin-top: 0.3rem;
    white-space: nowrap;
}

.score-why {
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.feedback-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-right-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.criteria-list {
    display: grid;
    gap: 0.85rem;
}

.criteria-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}

.criteria-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.criteria-score {
    color: #e2e8f0;
    font-weight: 800;
    font-size: 0.95rem;
}

.criteria-bar {
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.criteria-bar-fill {
    height: 100%;
    width: var(--fill, 0%);
    border-radius: 9999px;
    background: linear-gradient(90deg, #10b981, #0ea5e9);
    transition: width 0.4s ease;
}

.criteria-bar-fill.good {
    background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.criteria-bar-fill.warn {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.criteria-bar-fill.neutral {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}

.criteria-title {
    font-weight: 700;
    color: #e2e8f0;
}

.criteria-note {
    color: #cbd5e1;
    font-size: 0.95rem;
    margin-top: 0.2rem;
}

.criteria-pill {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e5e7eb;
}

.criteria-pill.good {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.4);
    color: #a7f3d0;
}

.criteria-pill.warn {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fcd34d;
}

.criteria-pill.neutral {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #e5e7eb;
}

.sim-preview-shell {
    position: relative;
    padding: 1.35rem 1.1rem 1.1rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(10, 12, 20, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    margin-bottom: 1rem;
}

.intent-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    margin-bottom: 0.85rem;
}

.chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
    flex-shrink: 0;
}

.chip-label {
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.02em;
}

.chip-sub {
    font-size: 0.85rem;
    color: #cbd5e1;
    opacity: 0.9;
}

.side-chip {
    position: absolute;
    top: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    color: #e5e7eb;
    font-size: 0.9rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}

.side-chip.left {
    left: 1rem;
}

.side-chip.right {
    right: 1rem;
}

.pill-icon {
    opacity: 0.85;
}

.bubble-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.talk-orb {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 9999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background: radial-gradient(circle at 30% 30%, #f8fafc, #e2e8f0 45%, #cbd5e1 65%, #94a3b8 100%);
    color: #0b1220;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.12);
    overflow: hidden;
    isolation: isolate;
    animation: float 8s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.talk-orb.user {
    box-shadow: 0 18px 40px rgba(16, 185, 129, 0.32), 0 0 0 10px rgba(16, 185, 129, 0.08), inset 0 0 26px rgba(16, 185, 129, 0.18);
}

.talk-orb.ai {
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.32), 0 0 0 10px rgba(99, 102, 241, 0.08), inset 0 0 26px rgba(99, 102, 241, 0.2);
}

.talk-orb.speaking {
    animation: float 8s ease-in-out infinite, speakPulseUser 2.8s ease-in-out infinite;
}

.talk-orb.ai.ai-speaking {
    animation: float 8s ease-in-out infinite, speakPulseAi 2.8s ease-in-out infinite;
}

.orb-label {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    font-weight: 800;
}

.orb-sub {
    font-size: 0.85rem;
    opacity: 0.75;
}

.speech-rings {
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0) 55%);
    opacity: 0;
    transform: scale(0.9);
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.35));
    pointer-events: none;
}

.talk-orb.ai .speech-rings {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.24) 0%, rgba(99, 102, 241, 0) 55%);
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.35));
}

.talk-orb.speaking .speech-rings {
    opacity: 1;
    animation: speakRings 1.8s ease-in-out infinite;
}

.voice-meter {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    width: 70%;
    justify-content: center;
    margin-top: 0.35rem;
}

.voice-meter span {
    width: 6px;
    height: var(--level, 12%);
    min-height: 6px;
    max-height: 72px;
    background: linear-gradient(180deg, #22c55e, #0ea5e9);
    border-radius: 9999px;
    opacity: 0.85;
    transition: height 0.2s ease, opacity 0.2s ease;
}

.talk-orb.ai .voice-meter span {
    background: linear-gradient(180deg, #818cf8, #6366f1);
}

.orb-wave {
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    animation: orbWave 3.6s ease-in-out infinite;
    opacity: 0.5;
    z-index: -1;
}

.stage-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.02);
    width: min(260px, 100%);
}

.stage-countdown {
    font-size: 1.8rem;
    letter-spacing: 0.16em;
    color: #e0f2fe;
    text-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
}

.stage-mic {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35);
    color: white;
}

.stage-mic.pulsing {
    animation: micPulse 2.4s ease-in-out infinite;
}

.stage-mic svg {
    width: 22px;
    height: 22px;
}

.live-caption {
    font-size: 0.95rem;
    color: #cbd5e1;
    text-align: center;
    line-height: 1.35;
}

.mini-chat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 0.85rem;
    display: grid;
    gap: 0.65rem;
    position: relative;
    min-height: 160px;
    overflow: hidden;
}

.transcript-preview {
    margin-top: 0.25rem;
}

.mini-bubble {
    width: fit-content;
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.35;
    padding: 0.65rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    animation: bubbleCycle 12s infinite;
}

.mini-bubble.user {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
    color: #d1fae5;
}

.mini-bubble.ai {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #e0e7ff;
}

.mini-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #a7f3d0;
}

.mini-badge.ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #22c55e;
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.14);
}

/* --- How it works page --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.2rem;
    padding: 1.5rem;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
}

.hw-step {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    padding: 1.2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.hw-step::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.08));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.hw-step.active {
    transform: translateY(-6px);
    border-color: rgba(16, 185, 129, 0.5);
}

.hw-step.active::after {
    opacity: 1;
}

.hw-step>* {
    position: relative;
    z-index: 1;
}

.builder-section {
    position: relative;
    overflow: hidden;
}

.builder-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 16%, rgba(16, 185, 129, 0.08), transparent 45%),
        radial-gradient(circle at 82% 24%, rgba(99, 102, 241, 0.08), transparent 45%);
    filter: blur(10px);
    opacity: 0.7;
    z-index: 0;
}

.builder-section>* {
    position: relative;
    z-index: 1;
}

.builder-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.builder-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
    animation: float 6s ease-in-out infinite;
}

.builder-pill:nth-child(2) {
    animation-delay: 0.5s;
}

.builder-pill:nth-child(3) {
    animation-delay: 0.9s;
}

.builder-pill:nth-child(4) {
    animation-delay: 1.3s;
}

.builder-pill:nth-child(5) {
    animation-delay: 1.7s;
}

.builder-flow {
    position: relative;
    padding-left: 2.9rem;
    display: grid;
    gap: 0.85rem;
}

.builder-line {
    position: absolute;
    left: 1.2rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.85), rgba(99, 102, 241, 0.75));
    border-radius: 999px;
    opacity: 0.9;
}

.builder-orb {
    position: absolute;
    left: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, #ecfeff, #10b981);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.1), 0 12px 30px rgba(16, 185, 129, 0.45);
    animation: builderOrbit 9s ease-in-out infinite;
}

.builder-step {
    position: relative;
    padding: 1rem 1rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(16, 185, 129, 0.05));
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.builder-step.active {
    transform: translateX(6px);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 18px 52px rgba(16, 185, 129, 0.24);
}

.builder-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.builder-step-index {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #a7f3d0;
    font-weight: 800;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.08);
}

.builder-step-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a7f3d0;
    font-weight: 700;
    font-size: 0.78rem;
}

.builder-step-title {
    color: #e2e8f0;
    font-weight: 800;
}

.builder-time {
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-weight: 700;
}

.builder-copy {
    color: #cbd5e1;
    line-height: 1.55;
    margin-top: 0.45rem;
}

.builder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.step-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #0ea5e9);
    width: 0%;
    transition: width 2.4s ease;
}

.builder-step.active .step-progress {
    width: 100%;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.scenario-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1.1rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.scenario-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.panel-subtitle {
    color: #cbd5e1;
    line-height: 1.5;
    max-width: 520px;
}

.panel-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.scenario-setup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.setup-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(16, 185, 129, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem;
    border-radius: 0.95rem;
    font-weight: 600;
    gap: 0.3rem;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}

.setup-label {
    color: #cbd5e1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.setup-value {
    color: #f8fafc;
    font-weight: 800;
    text-align: left;
    line-height: 1.35;
    word-break: break-word;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.demo-log {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
    max-height: 320px;
    overflow-y: auto;
}

.demo-msg {
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.demo-text {
    min-height: 1.3em;
    line-height: 1.45;
}

.demo-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    animation: wordIn 0.28s ease forwards;
}

.demo-msg.user {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.14);
}

.demo-msg.ai {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.12);
}

.demo-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: white;
}

.demo-avatar.user {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.demo-avatar.ai {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.push-to-talk-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    border: 1px solid rgba(16, 185, 129, 0.6);
    border-radius: 9999px;
    padding: 0.9rem 1.1rem;
    font-weight: 700;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.25);
}

.push-to-talk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(16, 185, 129, 0.35);
}

.demo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.scenario-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.demo-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
}

.demo-stat-card.compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.demo-disclaimer {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.05) 60%), rgba(16, 24, 40, 0.7);
    border: 1px solid rgba(16, 185, 129, 0.26);
    box-shadow: 0 14px 38px rgba(16, 185, 129, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ptt-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.9rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #d1fae5;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.12);
}

.ptt-state::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.16);
}

.speaking {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.18), 0 15px 45px rgba(16, 185, 129, 0.25);
}

.ai-speaking {
    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.18), 0 15px 45px rgba(99, 102, 241, 0.25);
}

@keyframes builderOrbit {
    0% {
        top: 12%;
    }

    33% {
        top: 42%;
    }

    66% {
        top: 72%;
    }

    100% {
        top: 12%;
    }
}

@keyframes speakRings {
    0% {
        transform: scale(0.92);
        opacity: 0.2;
    }

    40% {
        transform: scale(1.06);
        opacity: 0.55;
    }

    70% {
        transform: scale(1.14);
        opacity: 0.18;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes wordIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
        filter: blur(1px);
    }

    60% {
        opacity: 0.85;
        transform: translateY(2px) scale(1.01);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 900px) {
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .feedback-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .builder-flow {
        padding-left: 2.2rem;
    }

    .builder-line {
        left: 1rem;
    }

    .builder-orb {
        left: 0.5rem;
    }

    .builder-step {
        padding: 0.95rem 0.9rem 1.05rem;
    }

    .sim-preview-shell {
        padding: 1.2rem 0.85rem 0.85rem;
    }

    .scenario-panel {
        padding: 1rem;
    }

    .panel-subtitle {
        max-width: 100%;
    }

    .pill-row {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .side-chip {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
        top: 0.85rem;
    }

    .talk-orb {
        width: 118px;
        height: 118px;
    }
}

@keyframes micPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
        transform: scale(1.06);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(1);
    }
}

@keyframes speakPulseUser {
    0% {
        box-shadow: 0 18px 40px rgba(16, 185, 129, 0.32), 0 0 0 10px rgba(16, 185, 129, 0.08), inset 0 0 26px rgba(16, 185, 129, 0.2);
    }

    50% {
        box-shadow: 0 18px 50px rgba(16, 185, 129, 0.48), 0 0 0 16px rgba(16, 185, 129, 0.14), inset 0 0 30px rgba(16, 185, 129, 0.28);
    }

    100% {
        box-shadow: 0 18px 40px rgba(16, 185, 129, 0.32), 0 0 0 10px rgba(16, 185, 129, 0.08), inset 0 0 26px rgba(16, 185, 129, 0.2);
    }
}

@keyframes speakPulseAi {
    0% {
        box-shadow: 0 18px 40px rgba(99, 102, 241, 0.32), 0 0 0 10px rgba(99, 102, 241, 0.08), inset 0 0 26px rgba(99, 102, 241, 0.2);
    }

    50% {
        box-shadow: 0 18px 50px rgba(99, 102, 241, 0.48), 0 0 0 16px rgba(99, 102, 241, 0.14), inset 0 0 30px rgba(99, 102, 241, 0.28);
    }

    100% {
        box-shadow: 0 18px 40px rgba(99, 102, 241, 0.32), 0 0 0 10px rgba(99, 102, 241, 0.08), inset 0 0 26px rgba(99, 102, 241, 0.2);
    }
}

@keyframes orbWave {
    0% {
        transform: scale(0.75);
        opacity: 0.45;
    }

    60% {
        transform: scale(1.15);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bubbleCycle {

    0%,
    15% {
        opacity: 1;
        transform: translateY(0);
    }

    25%,
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}