:root {
    --primary: #1976d2;
    /* Medical Blue */
    --primary-dark: #1565c0;
    --secondary: #e3f2fd;
    /* Light Blue Background */
    --accent: #00bcd4;
    /* Cyan for Tech/AI accents */
    --text-dark: #2c3e50;
    --text-light: #546e7a;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(25, 118, 210, 0.1);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
}

body {
    background-color: #f8faff;
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* --- Utilities & Animations --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Header --- */
header {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    line-height: 1;
    font-family: 'Poppins';
    /* Helps vertical alignment */
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    /* Vertically align text with button */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s;
}

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

.nav-cta {
    background: var(--primary);
    color: white !important;
    padding: 10px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
}

.nav-cta:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* --- Hero Section --- */
.hero {
    padding: 160px 5% 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    position: relative;
}

.hero-text {
    flex: 1;
    max-width: 600px;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.25;
    margin-bottom: 20px;
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: -1px;
}

.hero h1 span {
    color: var(--primary);
}

.hero p {
    font-size: 1.15rem;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.7;
    font-weight: 400;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

.btn {
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.3px;
    font-family: 'Inter', sans-serif;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 20px rgba(25, 118, 210, 0.3);
}

.btn-secondary {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.4);
}

/* --- Hero Animation (Microservices Mesh) --- */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.msp-mesh {
    width: 500px;
    height: 500px;
    position: relative;
}

.msp-node {
    position: absolute;
    background: white;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    animation: float 6s ease-in-out infinite;
    z-index: 2;
    white-space: nowrap;
}

.msp-node i {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Node positioning */
.n1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.n2 {
    top: 20%;
    right: 5%;
    animation-delay: 1s;
}

.n3 {
    bottom: 20%;
    left: 5%;
    animation-delay: 2s;
}

.n4 {
    bottom: 10%;
    right: 15%;
    animation-delay: 3s;
}

.n-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    border: 3px solid var(--primary);
    z-index: 10;
}

@keyframes float {

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

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

/* Connection lines */
.connector {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    transform-origin: left;
    z-index: 1;
}

/* --- Problem & Solution --- */
.section {
    padding: 70px 8%;
    text-align: center;
}

.section-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.section-subtitle {
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto 60px;
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 400;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Explicit 3 columns */
    gap: 30px;
}

.card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: left;
    transition: 0.3s;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

.card h3 {
    font-size: 1.4rem;
    margin: 20px 0 15px;
    color: var(--text-dark);
    font-weight: 700;
    letter-spacing: -0.3px;
}

.card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 0.95rem;
    font-weight: 400;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
    border-color: var(--secondary);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: var(--secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 25px;
}

/* --- BSP Tech Showcase Grid --- */
/* --- BSP Tech Showcase Grid --- */
.bsp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
}

.bsp-card {
    background: white;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(25, 118, 210, 0.08);
    /* Soft floating shadow */
}


/* Hover effect removed per user request */
.bsp-card:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(25, 118, 210, 0.08);
    /* Keep original shadow */
    border-color: transparent;
    cursor: default;
}


.bsp-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.bsp-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.bsp-desc {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

/* --- Tech Showcases (Animations) --- */
.tech-showcase {
    background: #fff;
    padding: 100px 8%;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 100px;
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
}

.feature-visual {
    flex: 1;
    position: relative;
}

/* Animation 1: BSP (ECG) */
.ecg-monitor {
    background: #000;
    border-radius: 15px;
    padding: 20px;
    border: 4px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ecg-screen {
    height: 150px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
}

.ecg-line {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 0, 0.8) 50%, transparent 100%);
    animation: scan 2s linear infinite;
}

.heart-rate {
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 3rem;
    font-weight: bold;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes scan {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Animation 2: Smart Queue */
.queue-container {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
}


/* --- Triage Animation --- */
.triage-step {
    transition: opacity 0.5s ease;
    animation: triage-cycle 12s infinite;
}

.step-1 {
    animation-delay: 0s;
}

.step-2 {
    animation-delay: 4s;
}

.step-3 {
    animation-delay: 6s;
}

@keyframes triage-cycle {

    0%,
    30% {
        opacity: 1;
        z-index: 2;
    }

    33%,
    100% {
        opacity: 0;
        z-index: 0;
    }
}

/* Override for specific timings to create a sequence: 
   Step 1 (Input): 0-4s
   Step 2 (Process): 4-6s
   Step 3 (Result): 6-12s
*/
.step-1 {
    animation: show-step-1 12s infinite;
}

.step-2 {
    animation: show-step-2 12s infinite;
}

.step-3 {
    animation: show-step-3 12s infinite;
}

@keyframes show-step-1 {
    0% {
        opacity: 1;
        z-index: 3;
    }

    33% {
        opacity: 1;
        z-index: 3;
    }

    /* Show for 4s */
    36% {
        opacity: 0;
        z-index: 1;
    }

    96% {
        opacity: 0;
        z-index: 1;
    }

    100% {
        opacity: 1;
        z-index: 3;
    }
}

@keyframes show-step-2 {
    0% {
        opacity: 0;
        z-index: 1;
    }

    33% {
        opacity: 0;
        z-index: 1;
    }

    36% {
        opacity: 1;
        z-index: 3;
    }

    /* Show for 2s (Processing) */
    50% {
        opacity: 1;
        z-index: 3;
    }

    53% {
        opacity: 0;
        z-index: 1;
    }

    100% {
        opacity: 0;
        z-index: 1;
    }
}

@keyframes show-step-3 {
    0% {
        opacity: 0;
        z-index: 1;
    }

    50% {
        opacity: 0;
        z-index: 1;
    }

    53% {
        opacity: 1;
        z-index: 3;
    }

    /* Show for 6s (Result) */
    96% {
        opacity: 1;
        z-index: 3;
    }

    100% {
        opacity: 0;
        z-index: 1;
    }
}

@keyframes pulse-mic {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
    }
}

@keyframes voice-wave {
    0% {
        width: 10%;
    }

    20% {
        width: 50%;
    }

    40% {
        width: 30%;
    }

    60% {
        width: 80%;
    }

    80% {
        width: 40%;
    }

    100% {
        width: 10%;
    }
}

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

/* --- Data to Insights Animation --- */
.data-box {
    width: 100px;
    height: 60px;
    background: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #555;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    opacity: 0;
}

.data-box i {
    color: var(--primary);
    margin-bottom: 4px;
}

.box-1 {
    animation: slide-in-data 6s infinite;
    animation-delay: 0.0s;
}

.box-2 {
    animation: slide-in-data 6s infinite;
    animation-delay: 0.5s;
}

.box-3 {
    animation: slide-in-data 6s infinite;
    animation-delay: 1.0s;
}

.box-4 {
    animation: slide-in-data 6s infinite;
    animation-delay: 1.5s;
}

.model-process {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-core {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 0 20px rgba(25, 118, 210, 0.4);
    z-index: 3;
    animation: pulse-brain 2s infinite;
}

.insight-card-anim {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
    transform: translateX(50px);
    opacity: 0;
}

.card-1 {
    animation: pop-insight 6s infinite;
    animation-delay: 2.5s;
}

.card-2 {
    animation: pop-insight 6s infinite;
    animation-delay: 3.5s;
}

@keyframes slide-in-data {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }

    10% {
        transform: translateX(0);
        opacity: 1;
    }

    40% {
        transform: translateX(100px) scale(0.5);
        opacity: 0;
    }

    /* Move into model */
    100% {
        transform: translateX(100px) scale(0.5);
        opacity: 0;
    }
}

@keyframes pop-insight {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }

    10% {
        transform: translateX(0);
        opacity: 1;
    }

    70% {
        transform: translateX(0);
        opacity: 1;
    }

    80% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(20px);
        opacity: 0;
    }
}

@keyframes pulse-brain {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(25, 118, 210, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
        transform: scale(1);
    }
}

.queue-track {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    align-items: center;
}

.patient-dot {
    width: 40px;
    height: 40px;
    background: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: bold;
    transition: 0.5s;
}

.patient-dot.active {
    background: var(--primary);
    color: white;
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--primary);
}

.queue-status {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--text-light);
}

/* Animation 3: AI Calendar */
.calendar-ai {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.time-slot {
    padding: 10px;
    background: #f5f5f5;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
}

.time-slot.booked {
    background: #ffebee;
    color: #c62828;
    text-decoration: line-through;
}

.time-slot.ai-suggested {
    background: var(--secondary);
    color: var(--primary);
    border: 2px solid var(--primary);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
    }
}

/* --- Footer --- */
footer {
    background: var(--text-dark);
    color: white;
    padding: 60px 10%;
    text-align: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
}

.footer-col h4 {
    color: white;
    margin-bottom: 20px;
}

.footer-col a {
    color: #b0bec5;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
}

.footer-col a:hover {
    color: white;
}

/* Responsive */
@media (max-width: 768px) {

    /* Header */
    header {
        padding: 1rem 3%;
        flex-wrap: wrap;
    }

    .logo {
        font-size: 1.4rem;
        font-family: 'Poppins';
    }

    .nav-links {
        display: none;
    }

    /* Hero Section */
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 120px 5% 60px;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero-text {
        margin-bottom: 50px;
    }

    .hero-btns {
        flex-direction: column;
        gap: 12px;
    }

    .btn {
        width: 100%;
    }

    .msp-mesh {
        width: 280px;
        height: 280px;
        margin-top: 30px;
    }

    /* Sections */
    .section-title {
        font-size: 1.8rem !important;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
    }

    .grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card {
        padding: 20px;
    }

    .card h3 {
        font-size: 1.1rem;
    }

    /* Feature Rows */
    .feature-row,
    .feature-row.reverse {
        flex-direction: column;
        gap: 30px;
        padding: 30px 5%;
    }

    .feature-text h2 {
        font-size: 1.5rem;
    }

    .feature-text p {
        font-size: 0.95rem;
    }

    .feature-visual {
        width: 100%;
    }

    /* Consultation Animation */
    .consultation-animation-container {
        padding: 20px;
        min-height: 250px;
    }

    .consultation-animation-container button {
        padding: 10px 25px;
        font-size: 0.95rem;
    }

    /* Queue Container */
    .queue-container {
        padding: 20px;
    }

    .queue-status {
        font-size: 0.9rem;
    }

    .patient-dot {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }

    /* Calendar AI */
    .calendar-ai {
        height: 300px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-col {
        margin: 0 auto;
    }
}

/* --- Form Pages Specific --- */
/* (Re-declared for specific page usage, though some are shared) */
.form-container {
    max-width: 800px;
    margin: 50px auto;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.demo-card {
    background: white;
    width: 100%;
    max-width: 500px;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.15);
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

button[type="submit"] {
    width: 100%;
    padding: 15px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
}

button[type="submit"]:hover {
    background: #1565c0;
    transform: translateY(-2px);
}

.contact-info {
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    text-align: center;
}

.contact-item {
    margin: 10px 0;
    color: #555;
}

.success-msg {
    display: none;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}

.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* ============================================
   BSP TOOLKIT LIBRARY - RIGHT ALIGNED LAYOUT
   ============================================ */

/* Feature Row Layout Structure */
.feature-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 100px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
}

.feature-visual {
    flex: 1;
    position: relative;
}

/* BSP Search Controls */
.bsp-search-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.bsp-search-wrapper input {
    width: 100%;
    padding: 14px 14px 14px 45px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s;
    font-family: 'Inter', sans-serif;
    color: #37474f;
}

.bsp-search-wrapper input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.1);
}

.bsp-search-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #90a4ae;
    font-size: 1.1rem;
}

select {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    outline: none;
    font-size: 0.95rem;
    color: #546e7a;
    font-family: 'Inter', sans-serif;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23546e7a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    transition: all 0.3s;
}

select:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.1);
}

/* BSP Tool Cards Grid */
.bsp-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.bsp-tool-card {
    background: white;
    border: 2px solid #f5f5f5;
    border-radius: 14px;
    padding: 22px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bsp-tool-card:hover {
    border-color: #e3f2fd;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.bsp-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1976d2, #00bcd4);
    opacity: 0;
    transition: opacity 0.3s;
}

.bsp-tool-card:hover::before {
    opacity: 1;
}

.bsp-tool-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.bsp-tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Cardiology Icon Style */
.bsp-tool-icon.cardiology {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #d32f2f;
}

/* Respiratory Icon Style */
.bsp-tool-icon.respiratory {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1976d2;
}

.bsp-category-badge {
    background: #f5f5f5;
    color: #78909c;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.bsp-tool-card h4 {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: #1a237e;
    font-weight: 700;
}

.bsp-tool-card p {
    color: #78909c;
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.5;
}

.bsp-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bsp-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================
   OUR VISION SECTION - THREE POINTS
   ============================================ */

.vision-section {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: white;
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
}

/* Background Pattern Overlay */
.vision-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.08;
    background-image:
        radial-gradient(circle at 20% 50%, white 2px, transparent 2px),
        radial-gradient(circle at 80% 80%, white 1px, transparent 1px);
    background-size: 60px 60px, 40px 40px;
    pointer-events: none;
}

.vision-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.vision-section .section-title {
    color: white;
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.vision-subtitle {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 60px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-weight: 300;
}

.vision-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.vision-card {
    text-align: center;
    flex: 1;
    min-width: 300px;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 50px 35px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vision-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Top accent line on cards */
.vision-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 4px 4px;
    transition: width 0.3s;
}

.vision-card:hover::after {
    width: 100px;
}

.vision-icon-wrapper {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.vision-card:hover .vision-icon-wrapper {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.25);
}

.vision-icon-wrapper i {
    font-size: 2.2rem;
    color: white;
}

.vision-card h3 {
    color: white;
    font-size: 1.6rem;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.vision-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 300;
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .feature-row,
    .feature-row.reverse {
        flex-direction: column;
        gap: 50px;
    }

    .bsp-tool-grid {
        grid-template-columns: 1fr;
    }

    .vision-grid {
        flex-direction: column;
        align-items: center;
    }

    .vision-card {
        min-width: 100%;
        max-width: 100%;
        padding: 40px 30px;
    }

    .vision-section .section-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .vision-card {
        padding: 35px 25px;
    }

    .vision-icon-wrapper {
        width: 70px;
        height: 70px;
    }

    .vision-icon-wrapper i {
        font-size: 1.8rem;
    }

    .vision-card h3 {
        font-size: 1.4rem;
    }
}

/* --- Section Splitting & Stripes --- */
.section-stripe-white {
    background: white;
    padding: 100px 5%;
}

.section-stripe-blue {
    background: #f0f7ff;
    padding: 100px 5%;
    border-top: 1px solid #e3f2fd;
    border-bottom: 1px solid #e3f2fd;
}

/* --- Improved Entrance Animations --- */
@keyframes fadeInUpEnhanced {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.fade-in-entrance {
    animation: fadeInUpEnhanced 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    /* Starts invisible */
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

/* ===== SIMPLE 3-STEP PIPELINE ===== */
.simple-pipeline-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.1);
}

.simple-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 200px;
}

.stage-number {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.stage-icon {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 12px;
    transition: transform 0.3s;
}

.stage-icon.ai-pulse {
    animation: ai-pulse 2s infinite;
}

@keyframes ai-pulse {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 4px 25px rgba(25, 118, 210, 0.5);
        transform: scale(1.05);
    }
}

.stage-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.stage-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    font-style: italic;
}

.stage-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.stage-item {
    background: #f5f7fa;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-dark);
    border: 1px solid #e3e8ef;
}

.stage-item.tip {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
    font-weight: 500;
}

.simple-arrow {
    color: var(--primary);
    font-size: 1.5rem;
    animation: arrow-pulse 2s infinite;
}

@keyframes arrow-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(5px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .simple-pipeline-container {
        flex-direction: column;
        gap: 20px;
    }

    .simple-arrow {
        transform: rotate(90deg);
    }

    .simple-stage {
        width: 100%;
    }

    .stage-number {
        font-size: 1.2rem;
    }

    .stage-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .stage-title {
        font-size: 0.9rem;
    }
}

/* Extra Small Devices */
@media (max-width: 480px) {
    header {
        padding: 0.8rem 3%;
    }

    .logo {
        font-size: 1.1rem;
        font-family: 'Poppins';
    }

    .logo i {
        font-size: 1.2rem;
    }

    /* Hero */
    .hero {
        padding: 100px 3% 40px;
    }

    .hero h1 {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .hero-btns {
        gap: 10px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .msp-mesh {
        width: 200px;
        height: 200px;
    }

    .msp-node {
        width: 50px;
        height: 50px;
        font-size: 0.7rem;
    }

    .msp-node i {
        font-size: 1.2rem;
    }

    /* Section */
    .section {
        padding: 30px 3%;
    }

    .section-title {
        font-size: 1.4rem !important;
        margin-bottom: 15px;
    }

    .section-subtitle {
        font-size: 0.85rem !important;
    }

    .grid-3 {
        gap: 15px;
    }

    .card {
        padding: 15px;
    }

    .card h3 {
        font-size: 1rem;
    }

    .card p {
        font-size: 0.8rem;
    }

    .icon-box {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Feature Row */
    .feature-row,
    .feature-row.reverse {
        padding: 20px 3%;
        gap: 20px;
    }

    .feature-text h2 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .feature-text p {
        font-size: 0.85rem;
    }

    /* Consultation Animation */
    .consultation-animation-container {
        padding: 15px;
        min-height: 220px;
        border-radius: 12px;
    }

    .consultation-animation-container button {
        padding: 8px 20px;
        font-size: 0.85rem;
        border-radius: 25px;
    }

    .consultation-stage p {
        font-size: 0.8rem;
    }

    .soap-item {
        padding: 10px;
        font-size: 0.75rem;
    }

    .soap-item strong {
        font-size: 0.85rem;
    }

    /* Queue */
    .queue-container {
        padding: 15px;
    }

    .queue-track {
        gap: 8px;
    }

    .patient-dot {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    /* Calendar */
    .calendar-ai {
        height: 250px;
        padding: 10px;
    }

    /* Tech Showcase */
    .tech-showcase {
        padding: 30px 3%;
    }

    center h2 {
        font-size: 1.4rem;
    }

    /* Footer */
    .footer-content {
        padding: 30px 3%;
    }

    .footer-col h4 {
        font-size: 1rem;
    }

    .footer-col p,
    .footer-col a {
        font-size: 0.85rem;
    }
}

/* ===== ML PIPELINE ANIMATION ===== */
.ml-pipeline-container {
    background: rgba(25, 118, 210, 0.05);
    border: 1px solid rgba(25, 118, 210, 0.2);
    border-radius: 16px;
    padding: 25px 20px 20px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.pipeline-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10px;
}

.stage-label {
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    flex: 1;
    opacity: 0.7;
}

.pipeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 160px;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Data Sources */
.data-sources-stage {
    gap: 4px;
}

.data-source-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #e3f2fd;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-dark);
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInSource 8s infinite;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

.data-source-box i {
    color: var(--primary);
    font-size: 0.9rem;
}

.src-1 {
    animation-delay: 0s;
}

.src-2 {
    animation-delay: 0.2s;
}

.src-3 {
    animation-delay: 0.4s;
}

.src-4 {
    animation-delay: 0.6s;
}

@keyframes slideInSource {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    10% {
        opacity: 1;
        transform: translateX(0);
    }

    80% {
        opacity: 1;
        transform: translateX(0);
    }

    90% {
        opacity: 0;
        transform: translateX(10px);
    }

    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Pipeline Connectors */
.pipeline-connector {
    position: relative;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, rgba(25, 118, 210, 0.2), rgba(25, 118, 210, 0.5));
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connector-arrow {
    position: absolute;
    right: -6px;
    color: var(--primary);
    font-size: 1rem;
    font-weight: bold;
}

.data-packet {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: flowPacket 2s infinite;
    box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);
}

.packet-1 {
    animation-delay: 0s;
}

.packet-2 {
    animation-delay: 0.7s;
}

.packet-3 {
    animation-delay: 1.4s;
}

@keyframes flowPacket {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

.data-stream {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: streamFlow 1.5s infinite;
}

@keyframes streamFlow {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Ingestion Stage */
.ingestion-box {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    min-width: 70px;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.25);
}

.ingestion-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    color: white;
    font-size: 0.85rem;
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {

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

    50% {
        transform: scale(1.1);
    }
}

.ingestion-label {
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ingestion-bars {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.bar {
    width: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    animation: barPulse 1s infinite;
}

.bar-1 {
    height: 10px;
    animation-delay: 0s;
}

.bar-2 {
    height: 14px;
    animation-delay: 0.2s;
}

.bar-3 {
    height: 8px;
    animation-delay: 0.4s;
}

@keyframes barPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* Orchestration Stage */
.orchestration-box {
    background: white;
    border: 1px solid #e3f2fd;
    border-radius: 10px;
    padding: 10px;
    min-width: 90px;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

.orch-header {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 8px;
    justify-content: center;
}

.orch-header i {
    font-size: 0.7rem;
}

.orch-tasks {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.55rem;
    color: var(--text-light);
    padding: 3px 6px;
    background: #e3f2fd;
    border-radius: 3px;
    opacity: 0;
    animation: taskCheck 8s infinite;
}

.task-item i {
    color: #2e7d32;
    font-size: 0.5rem;
}

.task-1 {
    animation-delay: 1.5s;
}

.task-2 {
    animation-delay: 2s;
}

.task-3 {
    animation-delay: 2.5s;
}

@keyframes taskCheck {

    0%,
    15% {
        opacity: 0;
        transform: translateX(-5px);
    }

    20%,
    85% {
        opacity: 1;
        transform: translateX(0);
    }

    90%,
    100% {
        opacity: 0;
        transform: translateX(5px);
    }
}

/* Feature Vectors */
.feature-vector {
    position: absolute;
    width: 16px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    animation: vectorFlow 3s infinite;
}

.vector-1 {
    animation-delay: 0s;
}

.vector-2 {
    animation-delay: 1.5s;
    top: 6px;
}

@keyframes vectorFlow {
    0% {
        left: -20px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* ML/DL Model Core */
.model-stage {
    position: relative;
}

.model-box {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.model-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.ring-outer {
    width: 100px;
    height: 100px;
    border-color: rgba(25, 118, 210, 0.2);
    border-top-color: var(--primary);
    animation: rotateRing 3s linear infinite;
}

.ring-middle {
    width: 76px;
    height: 76px;
    border-color: rgba(0, 188, 212, 0.2);
    border-right-color: var(--accent);
    animation: rotateRing 2s linear infinite reverse;
}

.ring-inner {
    width: 52px;
    height: 52px;
    border-color: rgba(46, 125, 50, 0.2);
    border-bottom-color: #2e7d32;
    animation: rotateRing 1.5s linear infinite;
}

@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.model-brain {
    position: relative;
    z-index: 10;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 0 20px rgba(25, 118, 210, 0.4);
    animation: pulseBrain 2s infinite;
}

@keyframes pulseBrain {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(25, 118, 210, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(25, 118, 210, 0.6);
    }
}

.model-label {
    position: absolute;
    bottom: -8px;
    text-align: center;
    color: var(--primary);
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.neural-dots {
    position: absolute;
    width: 100%;
    height: 100%;
}

.neural-dots .dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: neuralPulse 2s infinite;
}

.d1 {
    top: 10%;
    left: 50%;
    animation-delay: 0s;
}

.d2 {
    top: 30%;
    left: 90%;
    animation-delay: 0.3s;
}

.d3 {
    top: 70%;
    left: 90%;
    animation-delay: 0.6s;
}

.d4 {
    top: 90%;
    left: 50%;
    animation-delay: 0.9s;
}

.d5 {
    top: 70%;
    left: 10%;
    animation-delay: 1.2s;
}

.d6 {
    top: 30%;
    left: 10%;
    animation-delay: 1.5s;
}

@keyframes neuralPulse {

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

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* Output Connector */
.output-connector .output-beam {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #2e7d32, transparent);
    animation: beamFlow 1.2s infinite;
}

@keyframes beamFlow {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Predictions Stage */
.predictions-stage {
    gap: 5px;
}

.prediction-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 10px;
    border-radius: 8px;
    min-width: 130px;
    box-shadow: 0 2px 10px rgba(25, 118, 210, 0.15);
    border: 1px solid #e3f2fd;
    opacity: 0;
    transform: translateX(20px);
    animation: slideOutPrediction 8s infinite;
}

.pred-1 {
    animation-delay: 4s;
}

.pred-2 {
    animation-delay: 4.3s;
}

.pred-3 {
    animation-delay: 4.6s;
}

@keyframes slideOutPrediction {

    0%,
    45% {
        opacity: 0;
        transform: translateX(20px);
    }

    55% {
        opacity: 1;
        transform: translateX(0);
    }

    90% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

.pred-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.pred-1 .pred-icon {
    background: #e8f5e9;
    color: #2e7d32;
}

.pred-2 .pred-icon {
    background: #fff3e0;
    color: #ef6c00;
}

.pred-3 .pred-icon {
    background: #e3f2fd;
    color: var(--primary);
}

.pred-content {
    flex: 1;
}

.pred-title {
    font-size: 0.55rem;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.pred-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Pipeline Progress Bar */
.pipeline-progress {
    margin-top: 20px;
    padding: 0 10px;
}

.progress-track {
    height: 3px;
    background: rgba(25, 118, 210, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent), #2e7d32);
    border-radius: 2px;
    animation: progressFlow 8s infinite;
}

@keyframes progressFlow {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Responsive for ML Pipeline */
@media (max-width: 1024px) {
    .pipeline-flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .pipeline-connector {
        display: none;
    }

    .pipeline-labels {
        display: none;
    }

    .pipeline-stage {
        min-width: 120px;
    }
}

/* ============================================
   VISION SECTION - MEDICAL BLUE THEME
   ============================================ */

.vision-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
}

/* Subtle Background Pattern */
.vision-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(25, 118, 210, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 188, 212, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

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

/* Header Styling */
.vision-header {
    text-align: center;
    margin-bottom: 60px;
}

.vision-eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1976d2;
    margin-bottom: 16px;
    padding: 8px 20px;
    background: rgba(25, 118, 210, 0.1);
    border-radius: 50px;
    border: 1px solid rgba(25, 118, 210, 0.2);
}

.vision-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1565c0;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    font-family: 'Poppins', sans-serif;
}

.vision-header p {
    font-size: 1.2rem;
    color: #546e7a;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid Layout */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card Styling */
.vision-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(25, 118, 210, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow:
        0 4px 20px rgba(25, 118, 210, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.vision-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(25, 118, 210, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.04);
    border-color: rgba(25, 118, 210, 0.2);
}

/* Top Accent Line */
.vision-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1976d2, #00bcd4);
    opacity: 0;
    transition: opacity 0.3s;
}

.vision-card:hover::after {
    opacity: 1;
}

/* Icon Styling */
.vision-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vision-icon-wrap i {
    font-size: 2rem;
    color: #1976d2;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
}

.vision-card:hover .vision-icon-wrap i {
    transform: scale(1.1);
}

.icon-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    opacity: 0.5;
    transition: all 0.3s;
}

.vision-card:hover .icon-bg {
    transform: scale(1.1);
    opacity: 0.8;
    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.2);
}

/* Typography */
.vision-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1565c0;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.vision-card p {
    color: #546e7a;
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
}

/* Connecting Lines (Desktop) */
.vision-line {
    display: none;
    position: absolute;
    top: 60px;
    right: -30px;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #1976d2, transparent);
    opacity: 0.2;
}

@media (min-width: 1024px) {
    .vision-line {
        display: block;
    }

    .vision-card:last-child .vision-line {
        display: none;
    }
}

/* Entrance Animations */
.vision-card:nth-child(1) {
    animation: fadeInUp 0.6s ease-out 0.1s backwards;
}

.vision-card:nth-child(2) {
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.vision-card:nth-child(3) {
    animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

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

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

/* Responsive Design */
@media (max-width: 1024px) {
    .vision-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }

    .vision-header h2 {
        font-size: 2.2rem;
    }

    .vision-line {
        display: none;
    }
}

@media (max-width: 768px) {
    .vision-section {
        padding: 80px 4%;
    }

    .vision-header h2 {
        font-size: 1.8rem;
    }

    .vision-header p {
        font-size: 1rem;
    }

    .vision-card {
        padding: 32px 24px;
    }

    .vision-icon-wrap {
        width: 70px;
        height: 70px;
    }

    .vision-icon-wrap i {
        font-size: 1.75rem;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .vision-card {
        animation: none;
    }

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

.consultation-animation-container {
    background: white;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .consultation-animation-container {
        min-height: 300px;
        padding: 18px 15px;
    }
}

@media (max-width: 480px) {
    .consultation-animation-container {
        min-height: 340px;
        padding: 15px 10px;
    }
}

/* Stages positioned absolutely so they can cross-fade */
.consultation-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.45s ease;
    padding: 15px;
}

.consultation-stage.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Stage 4 (SOAP Notes) needs more vertical space */
.consultation-stage[data-stage="3"] {
    justify-content: flex-start;
    padding-top: 20px;
    /* Reduced from 30px to fit all boxes */
    /* Scrolling only enabled on mobile - see mobile.css */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes recordingPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(211, 47, 47, 0);
    }
}

@keyframes soapBuild {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.soap-item {
    animation: soapBuild 0.5s ease-out forwards;
}

.soap-item:nth-child(1) {
    animation-delay: 0.2s;
}

.soap-item:nth-child(2) {
    animation-delay: 0.4s;
}

.soap-item:nth-child(3) {
    animation-delay: 0.6s;
}

.soap-item:nth-child(4) {
    animation-delay: 0.8s;
}

.recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffebee;
    color: #d32f2f;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background: #d32f2f;
    border-radius: 50%;
    animation: recordingPulse 1.5s infinite;
}

/* Mobile-specific SOAP grid fixes */
@media (max-width: 768px) {
    .consultation-stage[data-stage="3"]>div:first-child+div {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .consultation-stage[data-stage="3"]>div:first-child+div {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .soap-item {
        padding: 10px !important;
    }
}

@keyframes scalePulse {

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

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

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

/* --- Animated Data Flow Pipeline --- */
.data-flow-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 40px 20px;
    /* background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%); */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

/* Flow Stages */
.flow-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.stage-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

/* Data Sources (Left) */
.source-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    animation: slideInLeft 0.6s ease-out both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.source-item:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.source-item i {
    font-size: 1.3rem;
    color: #1976d2;
    width: 24px;
    text-align: center;
}

.source-item span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #263238;
}

/* Animated Particles */
.flow-particles {
    position: absolute;
    right: -10px;
    top: 0;
    bottom: 0;
    width: 20px;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    border-radius: 50%;
    animation: particleFlow 4s linear infinite;
    opacity: 0;
    box-shadow: 0 0 10px rgba(25, 118, 210, 0.5);
}

@keyframes particleFlow {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(600px);
        opacity: 0;
    }
}

/* Flow Connectors */
.flow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64b5f6;
    font-size: 2rem;
    animation: pulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Neural Engine (Center) */
.neural-engine {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.engine-ring-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #1976d2;
    border-bottom-color: #42a5f5;
    animation: spinRight 8s linear infinite;
    box-shadow: 0 0 15px rgba(25, 118, 210, 0.2);
}

.engine-ring-inner {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-left-color: #ab47bc;
    border-right-color: #7e57c2;
    animation: spinLeft 6s linear infinite;
}

.engine-core {
    position: relative;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    z-index: 2;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    animation: pulseCore 3s ease-in-out infinite;
}

.engine-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(66, 165, 245, 0.2) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: 1;
}

.engine-label {
    margin-top: 15px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1976d2;
    background: white;
    padding: 6px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

@keyframes spinRight {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinLeft {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes pulseCore {

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

    50% {
        transform: scale(1.05);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Insights (Right) */
.insight-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.insight-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: white;
    border-left: 4px solid #1976d2;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    animation: slideInRight 0.6s ease-out both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.insight-item:nth-child(2) {
    border-left-color: #ab47bc;
}

.insight-item:nth-child(3) {
    border-left-color: #ffa726;
}

.insight-item i {
    font-size: 1.5rem;
    color: #1976d2;
    width: 28px;
    text-align: center;
}

.insight-item:nth-child(2) i {
    color: #ab47bc;
}

.insight-item:nth-child(3) i {
    color: #ffa726;
}

.insight-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #263238;
    margin-bottom: 2px;
}

.insight-sub {
    font-size: 0.75rem;
    color: #78909c;
    font-weight: 500;
}

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* --- Multimodal AI Sequential Animation --- */
.mm-animation-container {
    width: 100%;
    height: 320px;
    background: white;
    border-radius: 16px;
    border: 1px solid #eee;
    padding: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mm-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    padding: 20px;
}

.mm-stage.active {
    opacity: 1;
    transform: translateY(0);
}

.mm-stage-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.mm-stage-desc {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Stage 1: Input Grid */
.mm-input-grid {
    display: flex;
    gap: 15px;
}

.mm-input-card {
    background: #f5f9ff;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e3f2fd;
    transform: scale(0.9);
    opacity: 0;
}

.mm-stage.active .mm-input-card {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.i-1 {
    animation-delay: 0.1s;
}

.i-2 {
    animation-delay: 0.3s;
}

.i-3 {
    animation-delay: 0.5s;
}

.mm-input-card i {
    font-size: 1.5rem;
    color: #1976d2;
}

.mm-input-card span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    text-align: center;
}

/* Stage 2: Processing */
.mm-process-core {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.mm-core-ring {
    position: absolute;
    inset: 0;
    border: 4px solid #fff3e0;
    border-top-color: #ff9800;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.mm-process-core i {
    color: #ff9800;
}

.mm-process-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.mm-process-sub {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}

/* Stage 3: Unified Output */
.mm-success-icon {
    width: 50px;
    height: 50px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    animation: scalePulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mm-output-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.mm-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.mm-row:last-child {
    border-bottom: none;
}

.mm-label {
    font-weight: 600;
    color: #555;
    font-size: 0.85rem;
}

.mm-val {
    color: #333;
    font-size: 0.85rem;
}

@keyframes popIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Enhanced Queue Management --- */
.queue-container {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border: 1px solid #f0f0f0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #d32f2f;
    background: #ffebee;
    padding: 4px 10px;
    border-radius: 20px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #d32f2f;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }

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

.est-wait {
    font-size: 0.85rem;
    color: #666;
}

.token-display {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.current-token-box {
    flex: 2;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid #90caf9;
    position: relative;
    overflow: hidden;
}

.current-token-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.token-label {
    font-size: 0.7rem;
    color: #1565c0;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.token-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0d47a1;
    line-height: 1;
    margin-bottom: 5px;
}

.token-status {
    font-size: 0.75rem;
    color: #1976d2;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
}

.next-token-box {
    flex: 1;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.next-token-box .token-label {
    color: #757575;
}

.token-number-small {
    font-size: 1.4rem;
    font-weight: 700;
    color: #616161;
}

/* Queue Track */
.queue-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.track-line {
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    margin-top: -16px;
    /* Pull up to align with dots */
    position: relative;
    z-index: 1;
}

.patient-dot {
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999;
    position: relative;
    transition: all 0.3s;
}

.patient-dot.done {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

.patient-dot.current-q {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1976d2;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.1);
}

.patient-dot.active-user {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: scale(1.2);
    box-shadow: 0 4px 10px rgba(25, 118, 210, 0.4);
}

.user-tooltip {
    position: absolute;
    top: -30px;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.user-tooltip::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* --- Vision Card Enhancements --- */
.vision-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    border: 1px solid transparent;
    /* Prepare for border change */
    overflow: hidden;
    /* For shine effect */
    position: relative;
}

.vision-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    background: white;
    border-color: #e3f2fd;
}

.vision-icon-wrap {
    transition: transform 0.5s ease;
    position: relative;
    z-index: 2;
}

.vision-card:hover .vision-icon-wrap {
    transform: scale(1.1) rotate(5deg);
}

.vision-card:hover .icon-bg {
    transform: scale(1.2);
    background: #e3f2fd;
    /* Light blue glow on hover */
}

.vision-card h3 {
    transition: color 0.3s ease;
}

.vision-card:hover h3 {
    color: var(--primary);
}

.vision-line {
    height: 3px;
    width: 40px;
    background: #eee;
    margin-top: 20px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

/* .vision-card:hover .vision-line {
    width: 100%;
    background: var(--primary);
} */



/* --- Scroll Trigger Animation Logic --- */
.animate-when-visible:not(.in-view) *,
.animate-when-visible:not(.in-view)::after,
.animate-when-visible:not(.in-view)::before {
    animation-play-state: paused !important;
}



/* --- Branching Queue Animation --- */
.queue-visual-tree {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border: 1px solid #f0f0f0;
    width: 100%;
    position: relative;
    z-index: 10;
}

.queue-root-node {
    border-bottom: 2px dashed #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.q-node-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1976d2;
    background: #e3f2fd;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background: #1976d2;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

.q-track-main {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.q-dot {
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    position: relative;
}

.q-dot.done {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

.q-dot.current {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1976d2;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.q-dot.user {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: scale(1.1);
}

.q-dot.sm {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
}

/* Branches */
.queue-branches {
    display: flex;
    gap: 15px;
}

.q-branch {
    flex: 1;
    background: #fafafa;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

/* Connectors */
.q-branch::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 22px;
    background: #eee;
}

.branch-label {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.left-branch .branch-label {
    color: #d32f2f;
}

.right-branch .branch-label {
    color: #f57f17;
}

.branch-visual {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
}

.branch-desc {
    font-size: 0.7rem;
    color: #888;
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* Emergency Animation */
.emergency-track .emergency-case {
    background: #d32f2f;
    border-color: #b71c1c;
    color: white;
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: 5;
    animation: emgInsert 4s infinite ease-in-out;
}

.emergency-track .q-dot.sm {
    transition: transform 0.3s;
    animation: emgShift 4s infinite ease-in-out;
}

.push-arrow {
    color: #d32f2f;
    opacity: 0;
    transform: translateX(-10px);
    animation: emgArrow 4s infinite;
}

@keyframes emgInsert {
    0% {
        opacity: 0;
        transform: scale(0.5) translateX(-20px);
    }

    20% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }

    /* Appears */
    70% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }

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

@keyframes emgShift {

    0%,
    15% {
        transform: translateX(0);
    }

    25%,
    70% {
        transform: translateX(20px);
    }

    /* Pushed right */
    100% {
        transform: translateX(0);
    }
}

@keyframes emgArrow {

    0%,
    15% {
        opacity: 0;
        transform: translateX(-10px);
    }

    25%,
    60% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(5px);
    }
}

/* Delay Animation */
.branch-visual.delay-track {
    padding-top: 15px;
    /* Space for +10m bubble */
}

.time-shift {
    position: absolute;
    top: 0;
    background: #fff8e1;
    color: #f57f17;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ffe082;
    animation: timePop 4s infinite;
    opacity: 0;
}

.delay-track .q-dot {
    animation: delaySlide 4s infinite ease-in-out;
}

@keyframes timePop {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

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

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

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

@keyframes delaySlide {

    0%,
    10% {
        transform: translateX(0);
    }

    20%,
    80% {
        transform: translateX(10px);
        color: #f57f17;
        border-color: #ffe082;
    }

    /* Shifted */
    100% {
        transform: translateX(0);
    }
}



/* --- Queue Scenario Cards --- */
.queue-scenarios {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.queue-scenario-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.scenario-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.scene-icon {
    width: 40px;
    height: 40px;
    background: #ffebee;
    color: #d32f2f;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.scene-icon.warning {
    background: #fff8e1;
    color: #f57f17;
}

.scenario-header h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: #333;
}

.scenario-header p {
    margin: 0;
    font-size: 0.8rem;
    color: #78909c;
}

.scenario-visual {
    position: relative;
    height: 60px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow: hidden;
}

.q-track-line {
    position: absolute;
    height: 2px;
    background: #e0e0e0;
    left: 20px;
    right: 20px;
    top: 50%;
    z-index: 1;
}

.visual-token {
    width: 30px;
    height: 30px;
    background: white;
    border: 2px solid #bdbdbd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #757575;
    position: absolute;
    z-index: 2;
    transition: all 0.3s ease;
}

/* --- Scenario 1: Emergency Insert Animation --- */
.emergency-scene .t1 {
    left: 20px;
    animation: shiftRight 4s infinite ease-in-out;
}

.emergency-scene .t2 {
    left: 60px;
    animation: shiftRight 4s infinite ease-in-out;
}

.emergency-scene .t3 {
    left: 100px;
    animation: shiftRight 4s infinite ease-in-out;
}

.emergency-token {
    background: #d32f2f;
    color: white;
    border-color: #b71c1c;
    left: 20px;
    opacity: 0;
    top: -40px;
    /* Start above */
    animation: dropIn 4s infinite ease-in-out;
}

@keyframes shiftRight {

    0%,
    20% {
        transform: translateX(0);
    }

    30%,
    80% {
        transform: translateX(40px);
    }

    /* Make space */
    100% {
        transform: translateX(0);
    }
}

@keyframes dropIn {

    0%,
    25% {
        opacity: 0;
        top: -40px;
    }

    35% {
        opacity: 1;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Drop in */
    80% {
        opacity: 1;
        top: 50%;
        transform: translateY(-50%);
    }

    100% {
        opacity: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* --- Scenario 2: Delay Animation --- */
.delay-scene .d1 {
    left: 20px;
}

.delay-scene .d2 {
    left: 60px;
}

.delay-scene .d3 {
    left: 100px;
}

.delay-scene .visual-token {
    animation: stallQueue 7s infinite ease-in-out;
}

.wait-time-badge {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: #e3f2fd;
    color: #1565c0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-val {
    animation: timeChange 7s infinite;
}

.delay-alert {
    background: #f44336;
    color: white;
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    animation: alertPop 7s infinite;
}

@keyframes stallQueue {

    0%,
    30% {
        border-color: #bdbdbd;
    }

    35%,
    80% {
        border-color: #f57f17;
        background: #fff8e1;
    }

    /* Highlight delay */
    100% {
        border-color: #bdbdbd;
        background: white;
    }
}

@keyframes timerChange {

    0%,
    30% {
        content: "15m";
    }

    35%,
    100% {
        content: "25m";
    }
}

/* Pseudo-element content animation is tricky, doing opacity swap or shake */

@keyframes timeChange {

    0%,
    30% {
        transform: scale(1);
        color: #1565c0;
    }

    35% {
        transform: scale(1.2);
        color: #f57f17;
    }

    40%,
    80% {
        transform: scale(1);
        color: #f57f17;
    }

    100% {
        transform: scale(1);
        color: #1565c0;
    }
}

@keyframes alertPop {

    0%,
    30% {
        opacity: 0;
        transform: scale(0);
    }

    35%,
    80% {
        opacity: 1;
        transform: scale(1);
    }

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



/* --- Animation Fixes --- */
.animate-when-visible.in-view * {
    animation-play-state: running !important;
}



/* --- Unified Tree Animation Adaptations --- */

/* Re-apply Tree Structure Styles (If overwritten) */
.queue-visual-tree {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    width: 100%;
    position: relative;
    z-index: 10;
}

.queue-root-node {
    border-bottom: 2px dashed #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.q-node-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1976d2;
    background: #e3f2fd;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background: #1976d2;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

.q-track-main {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.q-track-main .q-dot.done {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

.q-track-main .q-dot.current {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1976d2;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.q-track-main .q-dot.user {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: scale(1.1);
}


.queue-branches {
    display: flex;
    gap: 10px;
    /* Tighter gap */
}

.q-branch {
    flex: 1;
    background: #fafafa;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Branch Connectors */
.q-branch::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 22px;
    background: #eee;
}

.branch-label {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    text-align: center;
}

.branch-visual {
    height: 50px;
    width: 100%;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    position: relative;
    margin-bottom: 8px;
    overflow: hidden;
}

/* Animation Adapters for Tree Context */
.emergency-scene-tree .t1-tree {
    left: 10px;
    animation: shiftRightTree 4s infinite ease-in-out;
}

.emergency-scene-tree .t2-tree {
    left: 45px;
    animation: shiftRightTree 4s infinite ease-in-out;
}

.emergency-token-tree {
    background: #d32f2f;
    color: white;
    border-color: #b71c1c;
    left: 10px;
    opacity: 0;
    top: -30px;
    animation: dropInTree 4s infinite ease-in-out;
}

@keyframes shiftRightTree {

    0%,
    20% {
        transform: translateX(0);
    }

    30%,
    80% {
        transform: translateX(35px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes dropInTree {

    0%,
    25% {
        opacity: 0;
        top: -30px;
    }

    35% {
        opacity: 1;
        top: 10px;
    }

    /* Center vertically roughly */
    80% {
        opacity: 1;
        top: 10px;
    }

    100% {
        opacity: 0;
        top: 10px;
    }
}

/* Delay Tree Animation */
.wait-time-badge-tree {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: #f57f17;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.time-val-15 {
    animation: timerChange15 7s infinite;
}

@keyframes timerChange15 {

    0%,
    30% {
        opacity: 1;
    }

    34% {
        opacity: 0;
    }

    35%,
    100% {
        opacity: 1;
    }
}

/* Pseudo-content replacement hack didn t work well, swapping opacity for simple blink or using JS. 
   Actually, CSS content property is animatable in modern browsers but let keep it simple.
   Just pulsing the text color/size. 
*/

.delay-scene-tree .d1-tree {
    left: 10px;
    top: 18px;
    animation: stallQueue 7s infinite;
}

.delay-scene-tree .d2-tree {
    left: 45px;
    top: 18px;
    animation: stallQueue 7s infinite;
}




/* --- Vision Explode Animation --- */
/* Initial State (Not In View) */
.animate-when-visible:not(.in-view) .vision-card:nth-child(1) {
    transform: translateX(110%) scale(0.2);
    opacity: 0;
}

.animate-when-visible:not(.in-view) .vision-card:nth-child(2) {
    transform: scale(0.2);
    opacity: 0;
}

.animate-when-visible:not(.in-view) .vision-card:nth-child(3) {
    transform: translateX(-110%) scale(0.2);
    opacity: 0;
}

/* In View State (Restored by transition) */
.vision-card {
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.animate-when-visible.in-view .vision-card {
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* Add delays for a sequential "pop" feel if desired, 
   but user asked for "explode from center" which usually implies simultaneous or fast stagger.
   Let us add a tiny staggered delay for visual clarity. */
.animate-when-visible.in-view .vision-card:nth-child(1) {
    transition-delay: 1.1s;
}

.animate-when-visible.in-view .vision-card:nth-child(2) {
    transition-delay: 1.0s;
}

/* Center pops first? Or maybe all together */
.animate-when-visible.in-view .vision-card:nth-child(3) {
    transition-delay: 1.1s;
}

/* Mobile Reset (Disable horizontal translation on small screens to prevent overflow/weirdness) */
@media (max-width: 768px) {

    .animate-when-visible:not(.in-view) .vision-card:nth-child(1),
    .animate-when-visible:not(.in-view) .vision-card:nth-child(3) {
        transform: scale(0.5);
        /* Just scale up */
    }
}

/* --- Premium Hero Entrance Animations --- */

/* 1. Staggered Text Entrance */
.hero-text h1,
.hero-text p,
.hero-btns {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-text h1 {
    animation-delay: 0.2s;
}

.hero-text p {
    animation-delay: 0.4s;
}

.hero-btns {
    animation-delay: 0.6s;
}

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

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

/* 2. Gradient Text Effect */
.hero h1 span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    /* Helps with some browser rendering */
}

/* 3. Visual Nodes "Pop" Entrance */
/* We need to combine the float animation with the entrance. 
   Best way is to wrap the float in a container or use a combined animation.
   Simpler approach: Use the entrance animation on the node, and the float on an inner wrapper, 
   OR use a long delay for the float and start it after the pop. 
   
   Let s use a combined animation approach for simplicity if possible, or chain them.
   Actually, CSS allows multiple animations. 
*/

.msp-node {
    /* Overriding previous animation to include entrance */
    opacity: 0;
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 6s ease-in-out infinite;
    /* Float needs to start after entrance to avoid conflict? 
       Actually, if we just want them to pop in, we can let float run but it might look jumpy.
       Better: scaleIn modifies transform:scale. Float modifies transform:translateY. 
       They can coexist if we are careful, but safer to chain or use wrapper.
       
       Let s try chaining delays. 
       float delay = entrance delay + entrance duration.
    */
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Update delays to account for both animations */
.n1 {
    animation-delay: 0.5s, 1.1s;
}

/* scaleIn delay, float delay */
.n2 {
    animation-delay: 0.7s, 1.3s;
}

.n3 {
    animation-delay: 0.9s, 1.5s;
}

.n4 {
    animation-delay: 1.1s, 1.7s;
}

.n-center {
    animation-delay: 0.3s, 0.9s;
}

/* Refined Float to not conflict with Scale ( Scale sets transform to scale(1), float needs to respect that? 
   No, transform property is shared. 
   We should wrap the content of msp-node in a span or div for the float, OR use a wrapper in HTML.
   
   Since we cannot easily wrap every node content in HTML without big replace, 
   let s use a clever keyframe that includes the scale in:
   0% { opacity: 0; transform: translateY(0) scale(0); }
   10% { opacity: 1; transform: translateY(0) scale(1); }
   ... float loop ...
   
   Actually, the simplest robust way without changing HTML structure too much:
   Just define the animation list order correctly and hope the browser composites the transforms (it likely won t, it replaces).
   
   DECISION: I will update the `.msp-node` HTML to have a wrapper if possible, OR just realize that `float` uses `translateY` and `scaleIn` uses `scale`.
   If I set `animation: scaleIn ..., float ...`, the last one might win or they conflict.
   
   CORRECTION: I will assume the Float animation is separate. 
   Wait, the `floater` class idea is best. 
   I will add a `pop-in` class to the `.msp-node` and leave the float on it? No.
   
   Best Quick Fix:
   Redefine `float` to include `scale(1)`.
   And define `scaleIn` to end at `scale(1)`.
   
   Actually, I will try to just add `scaleIn` and see. If it conflicts, I will just make the entrance fade/slide which is safer.
   
   Let s stick to the plan: "Scale In". 
   I will update `landing.html` to add a wrapper div around the nodes content if needed, or better:
   Just make the entrance animation simply `fade-up-small` which is compatible with `float` (translateY).
   
   BUT user asked for "Scale In". 
   
   Let s update CSS to just use a combined keyframe for the entrance + float? Too complex to sync.
   
   Alternative:
   Animation 1: `popIn` (0->1s) -> sets scale 0->1.
   Animation 2: `float` (1s->inf) -> bounces Y.
   
   This requires the `float` animation to NOT override scale.
   `transform: translateY(-20px) scale(1)`
   
   I will update `@keyframes float` to explicitly include `scale(1)` to be safe, 
   and `@keyframes scaleIn` to end at `translateY(0) scale(1)`.
*/

@keyframes float {

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

    50% {
        transform: translateY(-30px) scale(1.05);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

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

/* Background Enhancement */
.hero {
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f0f7ff 100%);
    background-size: 200% 200%;
    animation: bgShift 15s ease infinite;
}

@keyframes bgShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



/* --- HERO NETWORK ACTIVATION ANIMATION --- */

/* 1. Center Core Pulse */
/* Central Node - Make "Core AI" always visible */
.n-center {
    width: 120px;
    height: 120px;
    background: white;
    border: 4px solid var(--primary);
    box-shadow: 0 0 30px rgba(25, 118, 210, 0.3);
    opacity: 1 !important;
    /* Always visible */
    transform: translate(-50%, -50%) scale(1) !important;
    /* Override animations */
    z-index: 20;
}

.n-center::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 3px solid var(--primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: pulseRing 2.5s ease-in-out infinite;
    animation-delay: 1.2s;
    /* Start pulsing after entrance */
}

@keyframes centerPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes pulseRing {
    0% {
        transform: scale(0.8);
        opacity: 1;
        border-width: 2px;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        border-width: 0px;
    }
}


/* 2. Connector Expansion */
.connector {
    transform-origin: left center;
    /* Grow from center */
    transform: scaleX(0);
    /* Hidden initially */
    animation: expandLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.connector:nth-child(1) {
    animation-delay: 0.8s;
}

.connector:nth-child(2) {
    animation-delay: 0.9s;
}

.connector:nth-child(3) {
    animation-delay: 1.0s;
}

.connector:nth-child(4) {
    animation-delay: 1.1s;
}

.connector:nth-child(5) {
    animation-delay: 1.2s;
}

@keyframes expandLine {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }

    /* Note: We need to maintain rotation! 
       Problem: animate transform overrides rotation.
       Solution: Wrap connector or animate width/mask instead?
       Easier: The connector HTML has inline styles for rotation: style="transform: rotate(0deg)"
       CSS animation will OVERRIDE this.
       
       Better approach: Animate a pseudo-element or inner child OR use width.
       The connector is a div with height 2px width 200px.
       Let s just animate width from 0 to 200px.
       BUT, existing CSS has width: 200px.
       
       CORRECTION: I will redefine `.connector` animation to animate WIDTH, not transform.
       This preserves the inline rotation on the parent div.
    */
}

/* Redefining Connector for Width Animation */
.connector {
    width: 0px;
    /* Start at 0 */
    animation: growConnector 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: left;
    /* Just in case */
    /* Previous styles were: width: 200px; */
}

@keyframes growConnector {
    to {
        width: 200px;
    }
}


/* 3. Satellite Nodes Pop */
.msp-node:not(.n-center) {
    transform: scale(0);
    opacity: 0;
    animation: popAndFloat 6s ease-in-out infinite;
    /* Complex timing: 
       0-0.5s: Entrance (Pop)
       0.5s-end: Float loop? 
       Actually, `float` is a simple bounce. 
       Let s separate: animation: popIn 0.5s forwards, float 6s infinite 0.5s.
    */
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 6s ease-in-out infinite;
}

.n1 {
    animation-delay: 1.0s, 1.6s;
}

/* Connector 1 finishes approx 1.0s */
.n2 {
    animation-delay: 1.1s, 1.7s;
}

.n3 {
    animation-delay: 1.2s, 1.8s;
}

.n4 {
    animation-delay: 1.3s, 1.9s;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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



/* --- AI DATA PARTICLE ANIMATION --- */
.ai-packet {
    position: absolute;
    top: -4px;
    /* Center on 2px line roughly (2px height line, packet 8px height? no, line is 2px. top -3 means -3px from top of line. if line is 2px height, center is 1px. packet 8px -> center 4px. so top -3 puts center at 1px. correct.) */
    left: 0;
    width: 8px;
    height: 8px;
    background: #00bcd4;
    /* Cyan AI Color */
    border-radius: 50%;
    box-shadow: 0 0 15px #00bcd4, 0 0 25px #00bcd4, 0 0 35px rgba(0, 188, 212, 0.5);
    /* Glowing effect */
    opacity: 0;
    z-index: 5;
    animation: transmitData 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Stagger particle starts */
.connector:nth-child(1) .ai-packet {
    animation-delay: 1.5s;
}

/* Start after connector grows */
.connector:nth-child(2) .ai-packet {
    animation-delay: 1.8s;
}

.connector:nth-child(3) .ai-packet {
    animation-delay: 2.1s;
}

.connector:nth-child(4) .ai-packet {
    animation-delay: 1.6s;
}

.connector:nth-child(5) .ai-packet {
    animation-delay: 1.9s;
}

@keyframes transmitData {
    0% {
        left: 0;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 100%;
        /* Travel full length */
        opacity: 0;
        transform: scale(0.5);
    }
}

/* --- Dynamic Assembly Animation (CSS Keyframes) --- */
.da-container {
    width: 100%;
    height: 380px;
    background: #fcfcfc;
    border-radius: 20px;
    border: 1px solid #ebebeb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.02);
}

.da-card {
    width: 280px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 20px;
    position: relative;
    transform: scale(0.95);
    z-index: 10;
    transition: transform 0.3s ease;
}

.da-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.da-avatar {
    width: 40px;
    height: 40px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.da-name {
    font-weight: 700;
    color: #333;
    font-size: 0.95rem;
}

.da-meta {
    font-size: 0.75rem;
    color: #888;
}

/* Dynamic Rows */
.da-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(-10px);
}

.da-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.blue {
    background: #e3f2fd;
    color: #1565c0;
}

.purple {
    background: #f3e5f5;
    color: #7b1fa2;
}

.orange {
    background: #fff3e0;
    color: #ef6c00;
}

.da-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.da-val {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
}

/* Row Animations */
.row-voice {
    animation: rowAppear 8s infinite;
    animation-delay: 1.5s;
}

.row-text {
    animation: rowAppear 8s infinite;
    animation-delay: 3.5s;
}

.row-vision {
    animation: rowAppear 8s infinite;
    animation-delay: 5.5s;
}

/* Orbs */
.da-orb {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    z-index: 20;
    opacity: 0;
}

.da-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #d32f2f;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.orb-1 {
    background: linear-gradient(135deg, #42a5f5, #1976d2);
    animation: orbFly1 8s infinite;
    animation-delay: 0.5s;
    top: 10%;
    left: 10%;
}

.orb-2 {
    background: linear-gradient(135deg, #ab47bc, #7b1fa2);
    animation: orbFly2 8s infinite;
    animation-delay: 2.5s;
    bottom: 10%;
    right: 10%;
}

.orb-3 {
    background: linear-gradient(135deg, #ffca28, #ff8f00);
    animation: orbFly3 8s infinite;
    animation-delay: 4.5s;
    bottom: 10%;
    left: 10%;
}

/* Success Overlay */
.da-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #2e7d32;
    font-weight: 800;
    font-size: 1.2rem;
    opacity: 0;
    animation: successFlash 8s infinite;
    animation-delay: 7s;
    border-radius: 16px;
}

/* Keyframes */
@keyframes rowAppear {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    10% {
        opacity: 1;
        transform: translateX(0);
    }

    90% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

@keyframes orbFly1 {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(0, 0) scale(1.1);
    }

    80% {
        opacity: 1;
        transform: translate(120px, 80px) scale(0);
    }

    /* Moves to center approx */
    100% {
        opacity: 0;
    }
}

@keyframes orbFly2 {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(0, 0) scale(1.1);
    }

    80% {
        opacity: 1;
        transform: translate(-100px, -80px) scale(0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes orbFly3 {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(0, 0) scale(1.1);
    }

    80% {
        opacity: 1;
        transform: translate(100px, -100px) scale(0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes successFlash {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
    }
}

/* --- Polyglot & Multimodal Showcase CSS --- */
.polyglot-mode {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    /* Reset layout for absolute positioning */
    display: block !important;
}

/* Central Core */
.pg-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-orb {
    font-size: 2rem;
    color: #1976d2;
    z-index: 2;
}

.pg-pulse {
    position: absolute;
    inset: -20px;
    border: 2px solid rgba(25, 118, 210, 0.1);
    border-radius: 50%;
    animation: pgPulse 3s infinite;
}

/* Floating Language Cards */
.pg-card {
    position: absolute;
    background: white;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    width: 200px;
    opacity: 0;
    transform: scale(0.8);
    z-index: 20;
}

/* Different Positions */
.c-voice {
    top: 15%;
    left: 10%;
    animation: pgFloat 12s infinite;
    animation-delay: 0s;
}

.c-text {
    bottom: 20%;
    right: 10%;
    animation: pgFloat 12s infinite;
    animation-delay: 3s;
}

.c-vision {
    top: 20%;
    right: 15%;
    animation: pgFloat 12s infinite;
    animation-delay: 6s;
}

.c-chat {
    bottom: 15%;
    left: 15%;
    animation: pgFloat 12s infinite;
    animation-delay: 9s;
}

.pg-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.voice-bg {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
}

.text-bg {
    background: linear-gradient(135deg, #8e24aa, #7b1fa2);
}

.vision-bg {
    background: linear-gradient(135deg, #fb8c00, #ef6c00);
}

.chat-bg {
    background: linear-gradient(135deg, #00acc1, #00838f);
}

.pg-text {
    display: flex;
    flex-direction: column;
}

.pg-native {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    margin-bottom: 2px;
}

.pg-meta {
    font-size: 0.7rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pg-badge {
    background: #212121;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.6rem;
    text-transform: uppercase;
}

/* Animations */
@keyframes pgPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

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

@keyframes pgFloat {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

    10% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(5px);
    }

    80% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    90% {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }

    100% {
        opacity: 0;
    }
}

/* --- Interactive Elements CSS --- */

/* Voice Waveform */
.voice-wave-visual {
    width: 40px;
    height: 40px;
    background: #e3f2fd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
}

.wave-bar {
    width: 4px;
    background: #1565c0;
    border-radius: 2px;
    animation: waveAnim 1.2s infinite ease-in-out;
}

.wave-bar:nth-child(1) {
    height: 40%;
    animation-delay: 0s;
}

.wave-bar:nth-child(2) {
    height: 70%;
    animation-delay: 0.1s;
}

.wave-bar:nth-child(3) {
    height: 100%;
    animation-delay: 0.2s;
}

.wave-bar:nth-child(4) {
    height: 60%;
    animation-delay: 0.3s;
}

.wave-bar:nth-child(5) {
    height: 30%;
    animation-delay: 0.4s;
}

@keyframes waveAnim {

    0%,
    100% {
        transform: scaleY(0.5);
    }

    50% {
        transform: scaleY(1);
    }
}

/* Vision Preview */
.vision-preview-box {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.vision-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vision-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ef6c00;
    box-shadow: 0 0 4px #ef6c00;
    animation: scanAnim 2s infinite linear;
    z-index: 5;
}

.vision-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.4rem;
    text-align: center;
    padding: 1px 0;
    backdrop-filter: blur(2px);
}

@keyframes scanAnim {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* --- Staggered Pop-up Animation CSS --- */

/* Beam Container */
.pg-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, #1976d2, transparent);
    transform-origin: 0 50%;
    opacity: 0;
    /* Hidden initially */
    pointer-events: none;
    z-index: -1;
    /* Beam draws itself */
    animation: beamDraw 0.5s ease-out forwards;
}

/* Beam Rotations */
.beam-voice {
    transform: rotate(35deg);
    animation-delay: 1.0s;
}

.beam-text {
    transform: rotate(215deg);
    animation-delay: 2.4s;
}

/* Text appears at 2.1s + 0.3s draw */
.beam-vision {
    transform: rotate(145deg);
    animation-delay: 1.7s;
}

/* Vision appears at 1.4s + 0.3s draw */
.beam-chat {
    transform: rotate(-35deg);
    animation-delay: 3.1s;
}

/* Chat appears at 2.8s + 0.3s draw */

/* Particle */
.beam-particle {
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transform: scale(0);
}

/* Particles flow AFTER appearance */
.beam-voice .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 1.2s;
}

.beam-vision .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 1.9s;
}

.beam-text .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 2.6s;
}

.beam-chat .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 3.3s;
}

/* Core Active Glow */
.core-active-glow {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25, 118, 210, 0.2) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    animation: coreHeartbeat 2s infinite ease-in-out;
    animation-delay: 4s;
    /* Starts beating after build-up */
}

/* Card Positioning (Fixed Alignment) */
/* Moving somewhat closer to center to fit beams better */
.c-voice {
    top: 10%;
    left: 5%;
}

.c-vision {
    top: 10%;
    right: 5%;
}

.c-text {
    bottom: 15%;
    right: 5%;
}

.c-chat {
    bottom: 10%;
    left: 5%;
}

/* Card Entrance Animations */
.pg-card,
.pg-core {
    opacity: 0;
    /* Hidden Start */
    transform: scale(0.5);
    animation: popInElastic 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered Delays (0.7s Interval) */
.pg-core {
    animation-delay: 0s;
}

.c-voice {
    animation-delay: 0.7s;
}

.c-vision {
    animation-delay: 1.4s;
}

.c-text {
    animation-delay: 2.1s;
}

.c-chat {
    animation-delay: 2.8s;
}


/* Keyframes */

@keyframes popInElastic {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        opacity: 1;
        transform: scale(1.1);
    }

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

@keyframes beamDraw {
    from {
        opacity: 0;
        width: 0;
    }

    to {
        opacity: 0.3;
        width: 200px;
    }
}

@keyframes particleFlow {
    0% {
        left: 0;
        transform: scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 200px;
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes coreHeartbeat {
    0% {
        transform: scale(0.9);
        opacity: 0.3;
    }

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

    100% {
        transform: scale(0.9);
        opacity: 0.3;
    }
}

/* --- Continuous Multimodal Flow CSS --- */

/* Beam Container */
.pg-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, #1976d2, transparent);
    /* Stronger visible beam */
    transform-origin: 0 50%;
    opacity: 0.15;
    /* Base visibility */
    pointer-events: none;
    z-index: -1;
    animation: beamPulse 3s infinite ease-in-out;
}

/* Beam Rotations */
.beam-voice {
    transform: rotate(35deg);
    animation-delay: 0s;
}

.beam-text {
    transform: rotate(215deg);
    animation-delay: 1.5s;
}

.beam-vision {
    transform: rotate(145deg);
    animation-delay: 0.7s;
}

.beam-chat {
    transform: rotate(-35deg);
    animation-delay: 2.2s;
}

/* Particle */
.beam-particle {
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transform: scale(0);
}

/* Continuous Particle Flow */
.beam-voice .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 0s;
}

.beam-vision .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 1s;
}

.beam-text .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 2s;
}

.beam-chat .beam-particle {
    animation: particleFlow 3s infinite linear;
    animation-delay: 1.5s;
}

/* Core Active Glow - Universal Heartbeat */
.core-active-glow {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25, 118, 210, 0.2) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    animation: coreHeartbeat 3s infinite ease-in-out;
}

/* Card Activation - Gentle Breathing */
.pg-card {
    /* Existing pgFloat is handled separately, here we add highlight */
    transition: all 0.3s;
}

/* Polyglot card styles handled by individual classes */
/* Keyframes */

@keyframes beamPulse {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.6;
    }

    /* Pulse brighter when transferring */
}

@keyframes particleFlow {
    0% {
        left: 0;
        transform: scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 200px;
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes coreHeartbeat {
    0% {
        transform: scale(0.9);
        opacity: 0.3;
    }

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

    100% {
        transform: scale(0.9);
        opacity: 0.3;
    }
}

/* ============================================
   MULTIMODAL FLOW ANIMATION STYLES
   ============================================ */

.multimodal-flow-container {
    background: linear-gradient(135deg, #f8fbff 0%, #e8f4fd 100%);
    border-radius: 16px;
    padding: 15px;
    position: relative;
    min-height: 400px;
    overflow: visible;
    box-shadow: 0 8px 30px rgba(25, 118, 210, 0.08);
    border: 1px solid rgba(25, 118, 210, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stage Container */
.mm-flow-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mm-flow-stage.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Stage Labels */
.mm-stage-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: white;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(25, 118, 210, 0.25);
}

.mm-stage-label.processing {
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

.mm-stage-label.success {
    background: linear-gradient(135deg, #2e7d32, #66bb6a);
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}

.mm-stage-label i {
    font-size: 1rem;
}

/* ===== STAGE 1: INPUT GRID ===== */
.mm-input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 280px;
}

.mm-input-card {
    background: white;
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 105px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(25, 118, 210, 0.1);
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.mm-flow-stage.active .mm-input-card {
    animation: mmCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.mm-input-card.i-1 {
    animation-delay: 0.1s;
}

.mm-input-card.i-2 {
    animation-delay: 0.2s;
}

.mm-input-card.i-3 {
    animation-delay: 0.3s;
}

.mm-input-card.i-4 {
    animation-delay: 0.4s;
}

.mm-input-card:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.15);
}

@keyframes mmCardPop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Card Icons */
.mm-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.mm-card-icon.voice-icon {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
}

.mm-card-icon.text-icon {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #ef6c00;
}

.mm-card-icon.vision-icon {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
}

.mm-card-icon.chat-icon {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
}

/* Voice Waveform */
.mm-voice-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 20px;
}

.mm-voice-wave span {
    width: 3px;
    background: linear-gradient(180deg, #1976d2, #64b5f6);
    border-radius: 2px;
    animation: mmWave 1s ease-in-out infinite;
}

.mm-voice-wave span:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}

.mm-voice-wave span:nth-child(2) {
    height: 12px;
    animation-delay: 0.1s;
}

.mm-voice-wave span:nth-child(3) {
    height: 16px;
    animation-delay: 0.2s;
}

.mm-voice-wave span:nth-child(4) {
    height: 10px;
    animation-delay: 0.3s;
}

.mm-voice-wave span:nth-child(5) {
    height: 7px;
    animation-delay: 0.4s;
}

@keyframes mmWave {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.8);
    }
}

/* Image Scan */
.mm-image-scan {
    position: relative;
    width: 48px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #e1bee7;
}

.mm-image-scan img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #7b1fa2, transparent);
    animation: mmScan 2s linear infinite;
}

@keyframes mmScan {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* Card Text */
.mm-card-text {
    text-align: center;
}

.mm-native {
    font-size: 0.65rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px;
}

.mm-badge {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Flow Indicator - Hidden to prevent overflow */
.mm-flow-indicator {
    display: none;
}

.mm-flow-indicator .mm-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #1976d2;
    border-radius: 50%;
    animation: mmParticleDown 1.5s infinite;
}

.mm-particle.p1 {
    left: -20px;
    animation-delay: 0s;
}

.mm-particle.p2 {
    left: 0;
    animation-delay: 0.3s;
}

.mm-particle.p3 {
    left: 20px;
    animation-delay: 0.6s;
}

@keyframes mmBounce {

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

    50% {
        transform: translateY(5px);
    }
}

@keyframes mmParticleDown {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

/* ===== STAGE 2: PROCESSOR ===== */
.mm-processor {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.mm-ring-outer,
.mm-ring-middle,
.mm-ring-inner {
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

.mm-ring-outer {
    width: 100%;
    height: 100%;
    border-top-color: #1976d2;
    border-bottom-color: #64b5f6;
    animation: mmSpinRight 4s linear infinite;
}

.mm-ring-middle {
    width: 75%;
    height: 75%;
    border-left-color: #ff9800;
    border-right-color: #ffb74d;
    animation: mmSpinLeft 3s linear infinite;
}

.mm-ring-inner {
    width: 50%;
    height: 50%;
    border-top-color: #7b1fa2;
    border-bottom-color: #ab47bc;
    animation: mmSpinRight 2s linear infinite;
}

.mm-core {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(25, 118, 210, 0.4);
    z-index: 5;
    animation: mmCorePulse 2s ease-in-out infinite;
}

.mm-glow {
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(25, 118, 210, 0.2) 0%, transparent 60%);
    animation: mmGlowPulse 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes mmSpinRight {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mmSpinLeft {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes mmCorePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(25, 118, 210, 0.4);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 50px rgba(25, 118, 210, 0.6);
    }
}

@keyframes mmGlowPulse {

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

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

/* Data Particles */
.mm-data-particle {
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    animation: mmParticleOrbit 3s linear infinite;
}

.mm-data-particle.dp1 {
    color: #1976d2;
    animation-delay: 0s;
}

.mm-data-particle.dp2 {
    color: #ef6c00;
    animation-delay: 0.75s;
}

.mm-data-particle.dp3 {
    color: #7b1fa2;
    animation-delay: 1.5s;
}

.mm-data-particle.dp4 {
    color: #2e7d32;
    animation-delay: 2.25s;
}

@keyframes mmParticleOrbit {
    0% {
        transform: rotate(0deg) translateX(68px) rotate(0deg);
        opacity: 0.3;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateX(68px) rotate(-360deg);
        opacity: 0.3;
    }
}

/* Process Status */
.mm-process-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mm-status-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #2e7d32;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(10px);
}

.mm-flow-stage.active .mm-status-item {
    animation: mmStatusPop 0.4s ease-out forwards;
}

.mm-status-item.s1 {
    animation-delay: 0.3s;
}

.mm-status-item.s2 {
    animation-delay: 0.5s;
}

.mm-status-item.s3 {
    animation-delay: 0.7s;
}

.mm-status-item.s4 {
    animation-delay: 0.9s;
}

.mm-status-item i {
    color: #2e7d32;
}

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

/* ===== STAGE 3: INSIGHT CARD ===== */
.mm-insight-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 290px;
    overflow: hidden;
    border: 1px solid #e8f5e9;
}

.mm-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-bottom: 1px solid #c8e6c9;
}

.mm-patient-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #1b5e20;
    font-size: 0.75rem;
}

.mm-patient-badge i {
    font-size: 1rem;
}

.mm-confidence {
    text-align: right;
}

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

.mm-conf-label {
    font-size: 0.55rem;
    color: #558b2f;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mm-insight-body {
    padding: 10px 14px;
}

.mm-insight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    opacity: 0;
    transform: translateX(-10px);
}

.mm-insight-row:last-child {
    border-bottom: none;
}

.mm-flow-stage.active .mm-insight-row {
    animation: mmRowSlide 0.4s ease-out forwards;
}

.mm-insight-row.r1 {
    animation-delay: 0.2s;
}

.mm-insight-row.r2 {
    animation-delay: 0.35s;
}

.mm-insight-row.r3 {
    animation-delay: 0.5s;
}

.mm-insight-row.r4 {
    animation-delay: 0.65s;
}

@keyframes mmRowSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mm-row-label {
    font-size: 0.65rem;
    color: #78909c;
    font-weight: 500;
}

.mm-row-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: #333;
    text-align: right;
}

.mm-row-value.highlight {
    color: #1976d2;
    background: #e3f2fd;
    padding: 3px 8px;
    border-radius: 5px;
}

.mm-row-value.priority-high {
    color: #d84315;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mm-row-value.priority-high i {
    animation: mmBlink 1s infinite;
}

@keyframes mmBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.mm-insight-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fafafa;
    color: #78909c;
    font-size: 0.6rem;
    border-top: 1px solid #f0f0f0;
}

/* Progress Bar - Hidden to prevent bottom clipping */
.mm-progress-bar {
    display: none;
}

.mm-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1976d2, #42a5f5, #2e7d32);
    animation: mmProgress 10s linear infinite;
}

@keyframes mmProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .multimodal-flow-container {
        min-height: 380px;
        padding: 20px 15px;
    }

    .mm-input-grid {
        gap: 10px;
    }

    .mm-input-card {
        padding: 12px;
    }

    .mm-card-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .mm-native {
        font-size: 0.7rem;
        max-width: 90px;
    }

    .mm-processor {
        width: 130px;
        height: 130px;
    }

    .mm-core {
        width: 55px;
        height: 55px;
        font-size: 1.4rem;
    }

    .mm-data-particle {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }

    @keyframes mmParticleOrbit {
        0% {
            transform: rotate(0deg) translateX(70px) rotate(0deg);
            opacity: 0.3;
        }

        25% {
            opacity: 1;
        }

        75% {
            opacity: 1;
        }

        100% {
            transform: rotate(360deg) translateX(70px) rotate(-360deg);
            opacity: 0.3;
        }
    }

    .mm-process-status {
        gap: 6px;
    }

    .mm-status-item {
        padding: 6px 10px;
        font-size: 0.65rem;
    }

    .mm-insight-card {
        max-width: 300px;
    }

    .mm-insight-header {
        padding: 14px 16px;
    }

    .mm-insight-body {
        padding: 12px 16px;
    }

    .mm-insight-row {
        padding: 10px 0;
    }

    .mm-row-label,
    .mm-row-value {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .multimodal-flow-container {
        min-height: 350px;
    }

    .mm-stage-label {
        font-size: 0.75rem;
        padding: 8px 14px;
    }

    .mm-input-card {
        padding: 10px;
    }

    .mm-badge {
        font-size: 0.55rem;
        padding: 2px 8px;
    }
}

/* ============================================
   POLYGLOT INTERACTIVE SECTION
   ============================================ */

.polyglot-interactive-container {
    border-radius: 16px;
    padding: 25px;
    position: relative;
    min-height: 380px;
    box-shadow: 0 8px 30px rgba(25, 118, 210, 0.08);
    border: 1px solid rgba(25, 118, 210, 0.1);
}

.poly-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
}

.poly-header i {
    font-size: 1.1rem;
}

.poly-input-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.poly-input-box {
    background: white;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    flex: 1;
    max-width: 140px;
}

.poly-input-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.15);
    border-color: var(--primary);
}

.poly-input-box.active {
    border-color: var(--primary);
    background: #e3f2fd;
}

.poly-box-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.5rem;
}

.poly-box-icon.voice {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
}

.poly-box-icon.image {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
}

.poly-box-icon.text {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #ef6c00;
}

.poly-box-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.poly-box-hint {
    font-size: 0.7rem;
    color: #999;
}

/* Panels */

.poly-input-row.hidden {
    display: none !important;
}

.poly-panel {
    display: none;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: panelSlideIn 0.3s ease;
}

.poly-panel.active {
    display: block;
}

@keyframes panelSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.poly-panel-header {
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: white;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.poly-panel-header i {
    font-size: 1rem;
}

.poly-close {
    margin-left: auto;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.poly-close:hover {
    opacity: 1;
}

/* Transcript Grid */
.poly-transcript-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 15px;
}

.poly-transcript-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 15px;
    border-left: 4px solid;
}

.poly-transcript-card.hindi {
    border-left-color: #ef6c00;
}

.poly-transcript-card.english {
    border-left-color: #1976d2;
}

.poly-transcript-card.hinglish {
    border-left-color: #7b1fa2;
}

.transcript-lang {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-flag {
    font-size: 1rem;
}

.transcript-text {
    font-size: 0.85rem;
    color: #333;
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.5;
}

.transcript-english {
    font-size: 0.7rem;
    color: #888;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
}

/* Image Analysis */
.poly-image-analysis {
    display: flex;
    gap: 20px;
    padding: 15px;
    align-items: center;
}

.analysis-image-container {
    position: relative;
    width: 150px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.analysis-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.analysis-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #2e7d32, transparent);
    animation: scanDown 2s infinite;
}

@keyframes scanDown {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

.analysis-results {
    flex: 1;
}

.analysis-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    color: #333;
}

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

.analysis-item i {
    color: #2e7d32;
}

.analysis-item strong {
    color: #1976d2;
}

/* Text Grid */
.poly-text-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 15px;
}

.poly-text-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 15px;
    border-top: 4px solid;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

.poly-text-card.active {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: white;
}

.poly-text-card.hindi {
    border-top-color: #ef6c00;
}

.poly-text-card.english {
    border-top-color: #1976d2;
}

.poly-text-card.hinglish {
    border-top-color: #7b1fa2;
}

.text-lang-badge {
    display: inline-block;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.text-content {
    font-size: 0.8rem;
    color: #444;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .poly-input-row {
        flex-direction: column;
        align-items: center;
    }

    .poly-input-box {
        max-width: 200px;
        width: 100%;
    }

    .poly-transcript-grid,
    .poly-text-grid {
        grid-template-columns: 1fr;
    }

    .poly-image-analysis {
        flex-direction: column;
        text-align: center;
    }

    .analysis-image-container {
        margin: 0 auto;
    }
}

/* ============================================
   VOICE DEMO ANIMATION STYLES
   ============================================ */

.voice-demo-container {
    padding: 20px;
    min-height: 280px;
    position: relative;
}

.voice-demo-stage {
    display: none;
}

.voice-demo-stage.active {
    display: block;
    animation: fadeInStage 0.4s ease;
}

@keyframes fadeInStage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stage 1: Recording Animation */
.mic-demo-area {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.demo-mic-button {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(25, 118, 210, 0.4);
    animation: micPulse 1.5s infinite;
}

@keyframes micPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(25, 118, 210, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 30px rgba(25, 118, 210, 0.6);
    }
}

.demo-cursor {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 1.5rem;
    color: #333;
    animation: cursorClick 3s infinite;
    z-index: 10;
}

@keyframes cursorClick {

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

    20% {
        transform: translate(-10px, -10px);
    }

    30%,
    40% {
        transform: translate(-15px, -15px) scale(0.9);
    }

    50% {
        transform: translate(-10px, -10px);
    }
}

.click-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border: 3px solid #1976d2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: clickRipple 3s infinite;
}

@keyframes clickRipple {

    0%,
    25% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        opacity: 0;
    }
}

/* Waveform */
.demo-waveform {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 50px;
    margin-bottom: 15px;
}

.demo-waveform span {
    width: 5px;
    background: linear-gradient(180deg, #1976d2, #64b5f6);
    border-radius: 3px;
    animation: waveBar 0.6s ease-in-out infinite;
}

.demo-waveform span:nth-child(1) {
    height: 15px;
    animation-delay: 0s;
}

.demo-waveform span:nth-child(2) {
    height: 25px;
    animation-delay: 0.1s;
}

.demo-waveform span:nth-child(3) {
    height: 35px;
    animation-delay: 0.15s;
}

.demo-waveform span:nth-child(4) {
    height: 30px;
    animation-delay: 0.2s;
}

.demo-waveform span:nth-child(5) {
    height: 40px;
    animation-delay: 0.25s;
}

.demo-waveform span:nth-child(6) {
    height: 35px;
    animation-delay: 0.3s;
}

.demo-waveform span:nth-child(7) {
    height: 25px;
    animation-delay: 0.35s;
}

.demo-waveform span:nth-child(8) {
    height: 30px;
    animation-delay: 0.4s;
}

.demo-waveform span:nth-child(9) {
    height: 20px;
    animation-delay: 0.45s;
}

.demo-waveform span:nth-child(10) {
    height: 15px;
    animation-delay: 0.5s;
}

@keyframes waveBar {

    0%,
    100% {
        transform: scaleY(0.5);
    }

    50% {
        transform: scaleY(1.2);
    }
}

/* Status Indicators */
.demo-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 25px;
    max-width: 250px;
    margin: 0 auto;
}

.demo-status.recording {
    background: #ffebee;
    color: #c62828;
}

.demo-status.success {
    background: #e8f5e9;
    color: #2e7d32;
    opacity: 0;
    animation: fadeInSuccess 0.5s forwards;
    animation-delay: 3s;
}

@keyframes fadeInSuccess {
    to {
        opacity: 1;
    }
}

.rec-dot {
    width: 10px;
    height: 10px;
    background: #c62828;
    border-radius: 50%;
    animation: recBlink 0.8s infinite;
}

@keyframes recBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Stage 2: Live Transcripts */
.live-transcripts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.live-transcript-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 12px 15px;
    border-left: 4px solid #ccc;
    opacity: 0;
    transform: translateY(10px);
}

.live-transcript-card.active {
    animation: cardSlideIn 0.4s forwards;
}

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

#live-hindi {
    border-left-color: #ef6c00;
}

#live-english {
    border-left-color: #1976d2;
}

#live-hinglish {
    border-left-color: #7b1fa2;
}

.live-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.lang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.lang-dot.hindi {
    background: #ef6c00;
}

.lang-dot.english {
    background: #1976d2;
}

.lang-dot.hinglish {
    background: #7b1fa2;
}

.live-text {
    font-size: 0.9rem;
    color: #333;
    min-height: 24px;
    display: inline;
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #1976d2;
    margin-left: 2px;
    animation: cursorBlink 0.6s infinite;
    vertical-align: middle;
    opacity: 0;
}

.live-transcript-card.typing .typing-cursor {
    opacity: 1;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ============================================
   IMAGE DEMO ANIMATION STYLES
   ============================================ */

.image-demo-container {
    padding: 20px;
    min-height: 280px;
}

.image-demo-stage {
    display: none;
}

.image-demo-stage.active {
    display: block;
    animation: fadeInStage 0.4s ease;
}

/* Stage 1: Upload Click */
.upload-demo-area {
    position: relative;
    width: 150px;
    margin: 0 auto 20px;
}

.demo-upload-box {
    width: 150px;
    height: 100px;
    border: 2px dashed #7b1fa2;
    border-radius: 12px;
    background: #f3e5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7b1fa2;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
}

.demo-upload-box i {
    font-size: 1.8rem;
}

.image-cursor {
    position: absolute;
    bottom: -5px;
    right: 10px;
    font-size: 1.5rem;
    color: #333;
    animation: imageCursorClick 3s infinite;
    z-index: 10;
}

@keyframes imageCursorClick {

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

    30% {
        transform: translate(-20px, -20px);
    }

    40%,
    50% {
        transform: translate(-25px, -25px) scale(0.9);
    }

    60% {
        transform: translate(-20px, -20px);
    }
}

.upload-click-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 80px;
    border: 3px solid #7b1fa2;
    border-radius: 12px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: uploadRipple 3s infinite;
}

@keyframes uploadRipple {

    0%,
    35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    45% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }

    60% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: 0;
    }
}

.uploading-status {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Stage 2: Uploading Progress */
.uploading-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.image-preview-loading {
    position: relative;
    width: 100px;
    height: 100px;
    background: #f5f5f5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 2.5rem;
}

.upload-progress-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 110px;
    height: 110px;
}

.upload-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 2;
}

.progress-bar-ring {
    fill: none;
    stroke: #7b1fa2;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: progressFill 2s ease forwards;
}

@keyframes progressFill {
    to {
        stroke-dashoffset: 0;
    }
}

.upload-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e1bee7;
    border-top-color: #7b1fa2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Stage 3: Analysis */
.analysis-demo-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.analysis-image-box {
    position: relative;
    width: 140px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.analysis-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    background: rgba(123, 31, 162, 0.1);
}

.scan-beam {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #7b1fa2, transparent);
    animation: scanBeam 2s ease-in-out infinite;
}

@keyframes scanBeam {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

.scan-complete-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #2e7d32;
    font-size: 2.5rem;
    background: white;
    border-radius: 50%;
    opacity: 0;
}

.analysis-image-box.scan-complete .scan-overlay {
    display: none;
}

.analysis-image-box.scan-complete .scan-complete-check {
    animation: checkPop 0.4s ease forwards;
}

@keyframes checkPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.live-analysis-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #333;
    opacity: 0;
    transform: translateX(-10px);
    border-left: 3px solid #7b1fa2;
}

.live-result-item.active {
    animation: resultSlideIn 0.4s ease forwards;
}

@keyframes resultSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.live-result-item i {
    color: #7b1fa2;
    font-size: 1rem;
}

.live-result-item strong {
    color: #1976d2;
}

#image-success-status {
    margin-top: 15px;
    opacity: 0;
}

#image-success-status.show {
    animation: fadeInSuccess 0.5s forwards;
}

/* ============================================
   3-BOX VOICE DEMO STYLES
   ============================================ */

.voice-boxes-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.voice-box {
    flex: 1;
    max-width: 160px;
    background: white;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.voice-box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 15px;
    margin-bottom: 12px;
}

.voice-box-header.hindi {
    background: #fff3e0;
    color: #ef6c00;
}

.voice-box-header.english {
    background: #e3f2fd;
    color: #1976d2;
}

.voice-box-header.hinglish {
    background: #f3e5f5;
    color: #7b1fa2;
}

.lang-dot-small {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.voice-box-mic {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
}

.mini-mic-btn {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    animation: miniMicPulse 1.5s infinite;
}

@keyframes miniMicPulse {

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

    50% {
        transform: scale(1.08);
    }
}

.mini-cursor {
    position: absolute;
    bottom: -2px;
    right: -5px;
    font-size: 1rem;
    color: #333;
    animation: miniCursorClick 2.5s infinite;
    z-index: 5;
}

@keyframes miniCursorClick {

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

    30% {
        transform: translate(-8px, -8px);
    }

    40%,
    50% {
        transform: translate(-10px, -10px) scale(0.85);
    }

    60% {
        transform: translate(-8px, -8px);
    }
}

.mini-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    border: 2px solid #1976d2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: miniRipple 2.5s infinite;
}

@keyframes miniRipple {

    0%,
    35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    45% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }

    60% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.4);
    }

    100% {
        opacity: 0;
    }
}

.mini-waveform {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 25px;
    margin-bottom: 10px;
    opacity: 0;
}

.voice-box.recording .mini-waveform {
    opacity: 1;
}

.mini-waveform span {
    width: 3px;
    background: linear-gradient(180deg, #1976d2, #64b5f6);
    border-radius: 2px;
    animation: miniWaveBar 0.5s ease-in-out infinite;
}

.mini-waveform span:nth-child(1) {
    height: 8px;
    animation-delay: 0s;
}

.mini-waveform span:nth-child(2) {
    height: 15px;
    animation-delay: 0.1s;
}

.mini-waveform span:nth-child(3) {
    height: 20px;
    animation-delay: 0.15s;
}

.mini-waveform span:nth-child(4) {
    height: 12px;
    animation-delay: 0.2s;
}

.mini-waveform span:nth-child(5) {
    height: 8px;
    animation-delay: 0.25s;
}

@keyframes miniWaveBar {

    0%,
    100% {
        transform: scaleY(0.6);
    }

    50% {
        transform: scaleY(1.3);
    }
}

.voice-box-transcript {
    min-height: 50px;
    font-size: 0.75rem;
    color: #333;
    line-height: 1.5;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.voice-box.transcribed .voice-box-transcript {
    opacity: 1;
}

#voice-success-status {
    opacity: 0;
    margin-top: 10px;
}

#voice-success-status.show {
    animation: fadeInSuccess 0.5s forwards;
}

/* Responsive for voice boxes */
@media (max-width: 768px) {
    .voice-boxes-row {
        flex-direction: column;
        align-items: center;
    }

    .voice-box {
        max-width: 200px;
        width: 100%;
    }

}


/* ============================================
   ROW-BASED VOICE DEMO STYLES
   ============================================ */

.voice-rows-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.voice-demo-row {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

.voice-demo-row.active {
    opacity: 1;
    transform: translateY(0);
}

.v-row-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right: 15px;
    border-right: 1px solid #eee;
}

.v-small-mic {
    position: relative;
    width: 36px;
    height: 36px;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
    transition: all 0.3s;
}

.voice-demo-row.recording .v-small-mic {
    background: #e3f2fd;
    color: #1976d2;
    animation: micPulseSmall 1s infinite;
}

@keyframes micPulseSmall {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 10px 0 rgba(25, 118, 210, 0.2);
    }
}

.v-mic-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border: 2px solid #1976d2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.voice-demo-row.recording .v-mic-ripple {
    animation: micRippleSmall 1.5s infinite;
}

@keyframes micRippleSmall {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.v-small-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    width: 40px;
    justify-content: center;
}

.v-small-wave span {
    width: 3px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    transition: all 0.2s;
}

.voice-demo-row.recording .v-small-wave span {
    background: linear-gradient(180deg, #1976d2, #64b5f6);
    animation: waveBarSmall 0.5s ease-in-out infinite;
}

.voice-demo-row.recording .v-small-wave span:nth-child(1) {
    animation-delay: 0s;
}

.voice-demo-row.recording .v-small-wave span:nth-child(2) {
    animation-delay: 0.1s;
}

.voice-demo-row.recording .v-small-wave span:nth-child(3) {
    animation-delay: 0.15s;
}

.voice-demo-row.recording .v-small-wave span:nth-child(4) {
    animation-delay: 0.2s;
}

.voice-demo-row.recording .v-small-wave span:nth-child(5) {
    animation-delay: 0.25s;
}

@keyframes waveBarSmall {

    0%,
    100% {
        height: 6px;
    }

    50% {
        height: 18px;
    }
}

.v-row-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.v-row-label {
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.v-row-label.hindi {
    color: #ef6c00;
}

.v-row-label.english {
    color: #1976d2;
}

.v-row-label.hinglish {
    color: #7b1fa2;
}

.v-row-text {
    font-size: 0.95rem;
    color: #333;
    min-height: 22px;
    font-weight: 500;
}

/* Image Demo Simplified */
.analysis-demo-content.centered {
    justify-content: center;
    width: 100%;
}

.analysis-demo-content.centered .analysis-image-box {
    margin: 0 auto;
    width: 180px;
    height: 140px;
}

#image-success-status {
    margin-top: 20px;
}

/* --- Family Dashboard Animation (Permission Control) --- */
.family-anim-container {
    width: 100%;
    max-width: 450px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    padding: 30px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    /* Center it */
}

.family-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.family-avatar {
    width: 60px;
    height: 60px;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    position: relative;
}

.family-avatar::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #4caf50;
    border: 2px solid white;
    border-radius: 50%;
}

.family-info h4 {
    margin: 0 0 4px 0;
    color: var(--text-dark);
    font-size: 1.1rem;
}

.family-info p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.85rem;
}

.permission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8faff;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.permission-row.active {
    background: #e3f2fd;
    border-color: #bbdefb;
}

.perm-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #455a64;
    font-size: 0.95rem;
}

.perm-label i {
    width: 24px;
    text-align: center;
    color: #90a4ae;
}

.permission-row.active .perm-label i {
    color: var(--primary);
}

.perm-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.anim-toggle {
    width: 44px;
    height: 24px;
    background: #cfd8dc;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.anim-toggle .knob {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    animation: moveKnob 6s infinite;
}

/* Animation State via Keyframes application */
.anim-toggle-wrapper {
    animation: activateToggle 6s infinite;
}

.cursor-hand {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23333%22%3E%3Cpath d=%22M9,2c-0.6,0-1,0.4-1,1v12c0,0,0,0,0,0l-4.6-2.1c-0.4-0.2-0.9,0-1.2,0.4c-0.2,0.4,0,0.9,0.4,1.1L8.8,17c0.8,0.4,1.4,1.1,1.5,1.9 c0.3,1.6,1.7,2.9,3.4,3c1.9,0.2,3.6-1.1,3.9-3c0-0.1,0-0.1,0-0.2c0-0.9,0-4.7,0-8.7C17.6,9.4,17.2,9,16.6,9c-0.6,0-1,0.4-1,1v5 c0,0.6-0.4,1-1,1s-1-0.4-1-1V4c0-0.6-0.4-1-1-1s-1,0.4-1,1v7c0,0.6-0.4,1-1,1s-1-0.4-1-1V3C10.6,2.4,10.2,2,9.6,2C9,2,9,2,9,2z%22/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    top: 55%;
    left: 80%;
    animation: cursorClick 6s infinite;
}

.perm-row-anim {
    animation: rowHighlight 6s infinite;
}

/* Status Text Animation */
.perm-status {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b0bec5;
    text-transform: uppercase;
}

.perm-status-anim {
    animation: statusTextAnim 6s infinite;
}

@keyframes cursorClick {

    0%,
    15% {
        opacity: 0;
        transform: translate(30px, 30px);
    }

    20% {
        opacity: 1;
        transform: translate(0, 0);
    }

    25% {
        transform: scale(0.9);
        /* Click press */
    }

    30% {
        transform: scale(1);
    }

    40% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
        transform: translate(10px, 20px);
    }
}

@keyframes activateToggle {

    0%,
    25% {
        background: #cfd8dc;
    }

    25% {
        background: var(--primary);
    }

    85% {
        background: var(--primary);
    }

    90%,
    100% {
        background: #cfd8dc;
    }
}

@keyframes moveKnob {

    0%,
    25% {
        transform: translateX(0);
    }

    27%,
    85% {
        transform: translateX(20px);
    }

    90%,
    100% {
        transform: translateX(0);
    }
}

@keyframes rowHighlight {

    0%,
    25% {
        background: #f8faff;
        border-color: transparent;
    }

    27%,
    85% {
        background: #e3f2fd;
        border-color: #bbdefb;
    }

    90%,
    100% {
        background: #f8faff;
        border-color: transparent;
    }
}

@keyframes statusTextAnim {

    0%,
    25% {
        color: #b0bec5;
        opacity: 0.8;
    }

    27%,
    85% {
        color: var(--primary);
        opacity: 1;
    }

    90%,
    100% {
        color: #b0bec5;
        opacity: 0.8;
    }
}

/* Text Content Switch Trick */
.status-text::after {
    content: 'RESTRICTED';
    animation: statusContentChange 6s infinite;
}

@keyframes statusContentChange {

    0%,
    25% {
        content: 'RESTRICTED';
    }

    27%,
    85% {
        content: 'ALLOWED';
    }

    90%,
    100% {
        content: 'RESTRICTED';
    }
}


/* --- Advanced Family Dashboard Workflow Animation --- */
.family-demo-stage {
    width: 100%;
    max-width: 450px;
    height: 260px;
    /* Fixed height for screens */
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.demo-screen {
    position: absolute;
    inset: 0;
    padding: 25px;
    display: flex;
    flex-direction: column;
    background: white;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    pointer-events: none;
    /* Let cursor float above */
}

/* Screen Header Shared */
.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.screen-title {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
}

.screen-header i {
    color: #b0bec5;
}

/* Screen A: Dashboard List */
.member-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 12px;
    background: #f8faff;
    border: 1px solid transparent;
}

.member-item.grandma {
    /* Target for click */
    position: relative;
}

.member-item.grandma.active-state {
    background: #e3f2fd;
    border-color: #bbdefb;
}

/* Screen B: Profile Actions */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.demo-btn {
    padding: 15px;
    border-radius: 12px;
    background: #f5f5f5;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    border: 1px solid transparent;
    transition: 0.3s;
}

.book-btn.clicked {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

/* Screen C: Consultation Note */
.note-card {
    background: #fff8e1;
    border: 1px dashed #ffb300;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.rx-box {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #1565c0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Animation Logic */
.screen-a {
    animation: cycleScreenA 12s infinite;
}

.screen-b {
    animation: cycleScreenB 12s infinite;
}

.screen-c {
    animation: cycleScreenC 12s infinite;
}

@keyframes cycleScreenA {

    0%,
    30% {
        opacity: 1;
        transform: translateY(0);
        z-index: 2;
    }

    35%,
    95% {
        opacity: 0;
        transform: translateY(-20px);
        z-index: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        z-index: 2;
    }
}

@keyframes cycleScreenB {

    0%,
    30% {
        opacity: 0;
        transform: translateY(20px);
        z-index: 0;
    }

    35%,
    65% {
        opacity: 1;
        transform: translateY(0);
        z-index: 2;
    }

    70%,
    100% {
        opacity: 0;
        transform: translateY(-20px);
        z-index: 0;
    }
}

@keyframes cycleScreenC {

    0%,
    65% {
        opacity: 0;
        transform: translateY(20px);
        z-index: 0;
    }

    70%,
    95% {
        opacity: 1;
        transform: translateY(0);
        z-index: 2;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
        z-index: 0;
    }
}

/* Cursor Animation */
.demo-cursor {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23333%22%3E%3Cpath d=%22M4 2l14 10-6.5 1.5L15 19l-3 1.5-3.5-5.5L4 19V2z%22/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 1;
    pointer-events: none;
    animation: cursorPath 12s infinite;
}

@keyframes cursorPath {

    /* Start at bottom right */
    0% {
        transform: translate(350px, 200px);
    }

    /* Move to Grandma Item (Screen A) ~25% */
    20% {
        transform: translate(200px, 90px);
    }

    25% {
        transform: translate(200px, 90px) scale(0.9);
    }

    /* Click */
    30% {
        transform: translate(200px, 90px) scale(1);
    }

    /* Move to Book Button (Screen B) ~50% */
    45% {
        transform: translate(100px, 160px);
    }

    50% {
        transform: translate(100px, 160px) scale(0.9);
    }

    /* Click */
    55% {
        transform: translate(100px, 160px) scale(1);
    }

    /* Move away / Reset */
    65% {
        transform: translate(350px, 250px);
        opacity: 1;
    }

    90% {
        transform: translate(350px, 250px);
        opacity: 0;
    }

    100% {
        transform: translate(350px, 200px);
        opacity: 0;
    }
}

/* Interactions */
.member-item.grandma {
    animation: highlightMember 12s infinite;
}

.book-btn {
    animation: clickBook 12s infinite;
}

@keyframes highlightMember {

    0%,
    25% {
        background: #f8faff;
        border-color: transparent;
    }

    26%,
    35% {
        background: #e3f2fd;
        border-color: #bbdefb;
    }

    /* Highlight on click */
    36%,
    100% {
        background: #f8faff;
        border-color: transparent;
    }
}

@keyframes clickBook {

    0%,
    50% {
        background: #f5f5f5;
        color: var(--text-dark);
        content: 'Book Appointment';
    }

    51%,
    65% {
        background: #e8f5e9;
        color: #2e7d32;
        border-color: #c8e6c9;
    }

    /* Confirmed */
    66%,
    100% {
        background: #f5f5f5;
        color: var(--text-dark);
    }
}

/* Changing text content for button requires pseudo element trick or just color change */
.book-btn::after {
    content: 'Book Appointment';
}

.book-btn.anim-text::after {
    animation: changeBtnText 12s infinite;
}

@keyframes changeBtnText {

    0%,
    50% {
        content: 'Book Appointment';
    }

    51%,
    65% {
        content: 'Confirmed!';
    }

    66%,
    100% {
        content: 'Book Appointment';
    }
}

/* --- Hero Section Network Animation --- */
.hero-network-container {
    width: 600px;
    height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-hub-center {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #e3f2fd, #1976d2);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 40px rgba(25, 118, 210, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.8);
    position: relative;
    animation: pulseCore 3s infinite ease-in-out;
}

.core-hub-center i {
    font-size: 2.5rem;
    color: #0d47a1;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.core-hub-center span {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0d47a1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Network Arms */
.network-arm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    /* Radius length */
    height: 2px;
    transform-origin: 0 50%;
}

.network-arm.arm-1 {
    transform: rotate(-45deg);
}

/* Top Left */
.network-arm.arm-2 {
    transform: rotate(-135deg);
}

/* Top Right (Requires flipping label) */
.network-arm.arm-3 {
    transform: rotate(45deg);
}

/* Bottom Right */
.network-arm.arm-4 {
    transform: rotate(135deg);
}

/* Bottom Left */

.arm-line {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #2196f3, transparent);
    position: relative;
    overflow: hidden;
    opacity: 0.4;
}

.arm-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translateX(-100%);
    animation: flowData 3s infinite linear;
}

/* Node Boxes */
.arm-node-box {
    position: absolute;
    right: -10px;
    /* Push out slightly */
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    /* Counter-rotate to stay level for Arm 1 */
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #37474f;
    font-size: 0.95rem;
    white-space: nowrap;
    animation: floatNode 4s infinite ease-in-out;
}

/* Specific Counter-Rotations for Text Readability */
.arm-1 .arm-node-box {
    transform: translateY(-50%) rotate(45deg);
}

.arm-2 .arm-node-box {
    transform: translateY(-50%) rotate(135deg);
    right: auto;
    left: 100%;
}

/* This one is tricky visually, let's just position absolute better or rely on parent div positioning without rotation transforms on the arm itself? 
   Better approach: Position arms absolutely without rotation, just top/left/right/bottom coordinates to avoid text rotation hell. 
   REVISING CSS STRATEGY below for cleaner layout.
*/


/* --- Corrected Hero Network CSS --- */

/* Node Positioning with Counter-Rotation */
.arm-1 {
    transform: rotate(225deg);
}

/* Points to Top-Left */
.arm-2 {
    transform: rotate(315deg);
}

/* Points to Top-Right */
.arm-3 {
    transform: rotate(45deg);
}

/* Points to Bottom-Right */
.arm-4 {
    transform: rotate(135deg);
}

/* Points to Bottom-Left */

.arm-1 .arm-node-box {
    transform: translateY(-50%) rotate(-225deg);
}

.arm-2 .arm-node-box {
    transform: translateY(-50%) rotate(-315deg);
}

.arm-3 .arm-node-box {
    transform: translateY(-50%) rotate(-45deg);
}

.arm-4 .arm-node-box {
    transform: translateY(-50%) rotate(-135deg);
}

.arm-node-box {
    position: absolute;
    right: -130px;
    /* Distance from end of line, effectively radius extension */
    top: 50%;
    width: 140px;
    background: white;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    color: #455a64;
    font-size: 0.9rem;
    z-index: 5;
    animation: floatNode 5s infinite ease-in-out;
}

.arm-node-box i {
    color: var(--primary);
    font-size: 1.1rem;
}

@keyframes pulseCore {
    0% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(25, 118, 210, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 60px rgba(25, 118, 210, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(25, 118, 210, 0.4);
    }
}

@keyframes flowData {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes floatNode {

    0%,
    100% {
        transform: translateY(-50%) rotate(var(--r, 0deg)) translateY(0);
    }

    50% {
        transform: translateY(-50%) rotate(var(--r, 0deg)) translateY(-5px);
    }
}

/* Fix rotation variables for floating animation */
.arm-1 .arm-node-box {
    --r: -225deg;
}

.arm-2 .arm-node-box {
    --r: -315deg;
}

.arm-3 .arm-node-box {
    --r: -45deg;
}

.arm-4 .arm-node-box {
    --r: -135deg;
}


/* Arm 5 (Right) Configuration */
.arm-5 {
    transform: rotate(0deg);
}

/* Points Right */
.arm-5 .arm-node-box {
    transform: translateY(-50%) rotate(0deg);
    --r: 0deg;
}


/* Updated Hero Node Positions (Targeting Tips of Spikes) */
.n1 {
    top: 27%;
    left: 18%;
    animation-delay: 0s;
}

/* Doctor */
.n2 {
    top: 12%;
    left: 62%;
    animation-delay: 1s;
}

/* Data */
.n3 {
    top: 73%;
    left: 18%;
    animation-delay: 2s;
}

/* Analytics */
.n4 {
    top: 88%;
    left: 62%;
    animation-delay: 3s;
}

/* Optimization */
.n5 {
    top: 50%;
    left: 90%;
    animation-delay: 4s;
    transform: translate(0, -50%);
}

/* Connectivity */


/* FORCE OVERRIDE for Node Positions */
.n1 {
    top: 27% !important;
    left: 18% !important;
    transform: translate(-100%, -100%) !important;
    animation-delay: 0s;
    right: auto !important;
    bottom: auto !important;
}

.n2 {
    top: 12% !important;
    left: 62% !important;
    transform: translate(10px, -50%) !important;
    animation-delay: 1s;
    right: auto !important;
    bottom: auto !important;
}

.n3 {
    top: 73% !important;
    left: 18% !important;
    transform: translate(-100%, 0) !important;
    animation-delay: 2s;
    right: auto !important;
    bottom: auto !important;
}

.n4 {
    top: 88% !important;
    left: 62% !important;
    transform: translate(10px, -50%) !important;
    animation-delay: 3s;
    right: auto !important;
    bottom: auto !important;
}

.n5 {
    top: 50% !important;
    left: 90% !important;
    transform: translate(10px, -50%) !important;
    animation-delay: 4s;
}