/* --- Ready-to-use CSS tokens & Brand Variables --- */
:root {
    /* Pure White Canvas */
    --background: #FFFFFF; 
    --surface-deep: #FFFFFF; 
    --surface-alt: #F8F9FA; 
    
    /* Typography Colors */
    --foreground: #1C282D; 
    --white: #FFFFFF;
    --muted-foreground: #455A64; 
    
    /* Sisca AI Brand Accents (Extracted from Logo) */
    --primary: #1E9E89; /* Logo Base Teal */
    --primary-gradient-start: #127A68; /* Logo Dark Shade */
    --primary-gradient-end: #25B89D; /* Logo Highlight Shade */
    
    /* Glass & Translucent Effects */
    --surface-glass: rgba(255, 255, 255, 1);
    --border-glass: rgba(30, 158, 137, 0.20); /* Border tinted with logo color */
    
    /* Glow Effects */
    --shadow-cyan: rgba(30, 158, 137, 0.15);
    --shadow-cyan-strong: rgba(30, 158, 137, 0.30);
    
    /* Geometry & Fonts */
    --radius-control: 12px;
    --radius-pill: 9999px;
    --font-display: 'Clash Display', sans-serif;
    --font-body: 'General Sans', 'Inter', sans-serif;
}

/* --- Brand Logo Image Sizing --- */
.brand-icon {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

/* CTA (join-footer) brand row: Covis-style logo+name row, mobile-only (see @media 768px block) */
.cta-brand-row {
    display: none;
}

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

html {
    overflow-x: hidden;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    line-height: 1.6;
    position: relative;
}

/* Ambient Background Glows (Currently hidden for a clean white look) */
.glow-orb {
    display: none; /* Isay hide kar diya gaya hai */
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    pointer-events: none;
}
.orb-1 {
    width: 500px; height: 500px;
    background: var(--shadow-cyan-strong);
    top: -10%; left: -10%;
}
.orb-2 {
    width: 600px; height: 600px;
    background: rgba(0, 96, 100, 0.4);
    bottom: 20%; right: -5%;
}

/* --- Typography --- */
h1, h2 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
}
h3 {
    font-family: 'Inter', sans-serif; /* Applied Inter font to all h3 */
    font-weight: 600;
}

.display-title {
    font-size: 5rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 2.5rem;
    color: var(--foreground);
    margin-bottom: 3rem;
    text-align: center;
}



.hero-network-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 450px;
    margin: 0 auto 1.5rem auto;
}

/* Central Logo Positioning */
.hero-logo-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
    z-index: 10;
}
.hero-logo-pulse {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: popInOut 4s ease-in-out infinite;
}

/* --- Floating Boxes --- */
.floating-box {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid var(--primary);
    color: var(--primary-gradient-start);
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px var(--shadow-cyan);
    z-index: 5;
    white-space: nowrap;
    opacity: 0;
    backdrop-filter: blur(10px);
    will-change: transform, opacity, top, left; 
}

/* Box Animations - Synchronized & Spaced Out */
.box-1 { animation: roamBox1 20s linear infinite; }
.box-2 { animation: roamBox2 20s linear infinite; }
.box-3 { animation: roamBox3 20s linear infinite; }
.box-4 { animation: roamBox4 20s linear infinite; }
.box-5 { animation: roamBox5 20s linear infinite; }

/* Box 1: Top-Left Edge & Bottom-Right Edge */
@keyframes roamBox1 {
    0%       { top: 10%; left: 5%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    5%, 15%  { top: 10%; left: 5%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    20%      { top: 10%; left: 5%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    
    21%, 49% { top: 80%; left: 95%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50%      { top: 80%; left: 95%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    55%, 65% { top: 80%; left: 95%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70%      { top: 80%; left: 95%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    71%, 100%{ top: 10%; left: 5%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Box 2: Bottom-Left Edge & Top-Right Edge (Starts at 10%) */
@keyframes roamBox2 {
    0%, 9%   { top: 80%; left: 10%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    10%      { top: 80%; left: 10%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15%, 25% { top: 80%; left: 10%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    30%      { top: 80%; left: 10%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    
    31%, 59% { top: 10%; left: 85%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    60%      { top: 10%; left: 85%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    65%, 75% { top: 10%; left: 85%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80%      { top: 10%; left: 85%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    81%, 100%{ top: 80%; left: 10%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes roamBox3 {
    0%, 19%  { top: 50%; left: 15%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    20%      { top: 50%; left: 15%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    25%, 35% { top: 50%; left: 15%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    40%      { top: 50%; left: 15%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    
    41%, 69% { top: 50%; left: 85%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    70%      { top: 50%; left: 85%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    75%, 85% { top: 50%; left: 85%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    90%      { top: 50%; left: 85%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    91%, 100%{ top: 50%; left: 15%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Box 4: Extreme Top-Center & Extreme Bottom-Center (Starts at 30%) */
@keyframes roamBox4 {
    0%, 29%  { top: -2%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    30%      { top: -2%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    35%, 45% { top: -2%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50%      { top: -2%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    
    51%, 79% { top: 80%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    80%      { top: 80%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    85%, 95% { top: 80%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100%     { top: 80%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Box 5: Inner Top-Left & Inner Bottom-Right (Starts at 40%) */
/* Fix for "Secure & Reliable" box going off-screen on mobile */
    /* Fix for "Secure & Reliable" box going off-screen and behind logo on mobile */
    @keyframes roamBox5 {
        0%, 5%   { top: 85%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
        10%      { top: 85%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        
        11%, 39% { top: 85%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        40%      { top: 85%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        45%, 55% { top: 85%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
        60%      { top: 85%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        
        61%, 89% { top: 12%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        90%      { top: 12%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        95%, 100%{ top: 12%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    }

/* --- Connection Lines --- */
.network-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

.data-line {
    stroke: var(--primary);
    stroke-width: 2.5px;
    stroke-dasharray: 8, 8;
    opacity: 0;
}

/* Line animations synced perfectly with their boxes */
.line-1 { animation: lineFlow 7s infinite linear; }
.line-2 { animation: lineFlow 11s infinite linear 2s; }
.line-3 { animation: lineFlow 16s infinite linear 4s; }
.line-4 { animation: lineFlow 17s infinite linear 1s; }
.line-5 { animation: lineFlow 19s infinite linear 5s; }

@keyframes lineFlow {
    0%, 100% { opacity: 0; stroke-dashoffset: 100; }
    15% { opacity: 0.8; }
    35% { opacity: 0.8; }
    50% { opacity: 0; stroke-dashoffset: 0; }
}


@keyframes popInOut {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); } /* 3% bahar ki taraf pop hoga */
}

.hero-logo-rotating {
    width: 250px; 
    height: 250px;
    object-fit: contain;
    display: block;
    /* 20 seconds mein continuous 360 degree rotation */
    animation: slowRotate 18s linear infinite; 
    filter: drop-shadow(0 15px 30px var(--shadow-cyan-strong));
}

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

.brand-text-gradient {
    /* Kept inline with the headline */
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text-side {
    text-align: left;
}

.eyebrow-text {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.5rem; /* Gap reduced to bring heading up */
}

/* --- Component Guidance: Buttons --- */
.btn-primary {
    display: inline-flex;
    color: var(--white);
    align-items: center;  /* Vertically perfect center karega */
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    padding: 0.55rem 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--primary);
    box-shadow: 0 0 15px var(--shadow-cyan);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--shadow-cyan-strong);
}

.btn-secondary {
    display: inline-block;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 550;
    text-decoration: none;
    padding: 0.8rem 2rem;
    border-radius: var(--radius-pill);
    background: var(--primary);
    border: 1px solid var(--primary);
    transition: all 0.4s ease;
}

.btn-secondary:hover {
    background: var(--white); /* Teal background on hover */
    color: var(--primary); /* White text on hover */
    box-shadow: none; /* Soft glow effect */
}

/* --- Navigation --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 3.8rem; /* Top aur bottom padding considerably reduce kar di gayi hai */
    background: var(--background);
    border-bottom: 1px solid transparent; 
    
    /* Sticky Header Settings */
    position: -webkit-sticky; /* Safari ke lye */
    position: sticky;
    top: 0;
    z-index: 1000; 
    transition: all 0.6s ease;
}

/* Jab user scroll karega toh ye design apply hoga */
.navbar.scrolled {
    border-bottom: 1px solid var(--border-glass); /* Green partition line wapas aa jayegi */
    box-shadow: 0 4px 15px rgba(30, 158, 137, 0.05); /* Halka sa teal glow shadow */
}

.logo {
    font-family: 'satoshi', sans-serif; /* Applied Michroma font */
    font-size: 1.75rem;
    font-weight: 700; /* Set to normal because Michroma & satoshi is naturally thick */
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 4px; /* Thora gap increase kiya image ki tarah */
    letter-spacing: 1px; /* Tech vibe ke liye halki si spacing */
}
.logo i { color: var(--primary); }

.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a:not(.btn-primary):not(.btn-secondary) {
    color: var(--foreground);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.6s;
}
.nav-links a:hover:not(.btn-primary):not(.btn-secondary) {
    color: var(--primary);
}

/* --- Layout Sections --- */
/* --- Hero Layout (2-Column Grid) --- */
.hero {
    min-height: 75vh; /* Screen ki height thori reduce ki hai */
    display: flex;
    align-items: flex-start; /* Content ko center ke bajaye oopar align karega */
    padding: 2rem 5% 5rem 5%; /* Top padding sirf 2rem reh gayi hai */
}

.dual-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Left text slightly wider, Right visual */
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.hero-visual-side {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

/* --- The Intelligent System Section --- */
.section-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: var(--muted-foreground);
    max-width: 650px;
    margin: 0 auto 3.5rem auto;
    font-weight: 400;
    line-height: 1.6;
}

.process-cards-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: nowrap;
}

/* Compact Card Styling */
.process-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1.8rem 1rem;
    width: 200px; /* Chota aur compact size */
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: all 0.6s ease;
}

.process-card h4 {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.2rem;
    color: var(--foreground);
    margin: 0;
}

.process-card p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--muted-foreground);
    line-height: 1.4;
    margin: 0;
}

/* --- User Manual Hover Effects --- */
.process-card:hover {
    border-color: var(--primary);
    /* Pop-up effect (transform) removed completely */
    box-shadow: 0 10px 25px var(--shadow-cyan);
}

.process-card:hover .process-icon-box {
    background: var(--primary);
    color: var(--white);
}

/* Card par hover karne se uske aglay sibling (Arrow) ka color Teal ho jaye */
.process-card:hover + .process-arrow {
    color: var(--primary);
}

.process-icon-box {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    background: rgba(30, 158, 137, 0.1);
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    transition: all 0.6s ease;
}

.process-arrow {
    color: var(--border-glass);
    font-size: 1rem;
    transition: all 0.6s ease;
}
/* --- Automatic Cumulative Sequence (Fast 5s Loop) --- */

/* 1. Card 1 & Arrow 1 */
.auto-glow-1 { animation: cardGlow1 6s infinite; }
.auto-glow-1 .process-icon-box { animation: iconBoxGlow1 6s infinite; }
.auto-arrow-1 { animation: arrowGlow1 6s infinite; }

/* 2. Card 2 & Arrow 2 */
.auto-glow-2 { animation: cardGlow2 6s infinite; }
.auto-glow-2 .process-icon-box { animation: iconBoxGlow2 6s infinite; }
.auto-arrow-2 { animation: arrowGlow2 6s infinite; }

/* 3. Card 3 & Arrow 3 */
.auto-glow-3 { animation: cardGlow3 6s infinite; }
.auto-glow-3 .process-icon-box { animation: iconBoxGlow3 6s infinite; }
.auto-arrow-3 { animation: arrowGlow3 6s infinite; }

/* 4. Card 4 */
.auto-glow-4 { animation: cardGlow4 6s infinite; }
.auto-glow-4 .process-icon-box { animation: iconBoxGlow4 6s infinite; }


/* --- Keyframes for the Sequence (Smooth Fade-In Effect) --- */

/* Step 1 */
@keyframes cardGlow1 {
    0%, 5% { border-color: var(--border-glass); box-shadow: none; }
    10%, 60% { border-color: var(--primary); box-shadow: 0 10px 25px var(--shadow-cyan); }
    65%, 100% { border-color: var(--border-glass); box-shadow: none; }
}
@keyframes iconBoxGlow1 {
    0%, 5% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
    10%, 60% { background: var(--primary); color: var(--white); }
    65%, 100% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
}
@keyframes arrowGlow1 {
    0%, 5% { color: var(--border-glass); }
    10%, 60% { color: var(--primary); }
    65%, 100% { color: var(--border-glass); }
}

/* Step 2 */
@keyframes cardGlow2 {
    0%, 15% { border-color: var(--border-glass); box-shadow: none; }
    20%, 60% { border-color: var(--primary); box-shadow: 0 10px 25px var(--shadow-cyan); }
    65%, 100% { border-color: var(--border-glass); box-shadow: none; }
}
@keyframes iconBoxGlow2 {
    0%, 15% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
    20%, 60% { background: var(--primary); color: var(--white); }
    65%, 100% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
}
@keyframes arrowGlow2 {
    0%, 15% { color: var(--border-glass); }
    20%, 60% { color: var(--primary); }
    65%, 100% { color: var(--border-glass); }
}

/* Step 3 */
@keyframes cardGlow3 {
    0%, 25% { border-color: var(--border-glass); box-shadow: none; }
    30%, 60% { border-color: var(--primary); box-shadow: 0 10px 25px var(--shadow-cyan); }
    65%, 100% { border-color: var(--border-glass); box-shadow: none; }
}
@keyframes iconBoxGlow3 {
    0%, 25% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
    30%, 60% { background: var(--primary); color: var(--white); }
    65%, 100% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
}
@keyframes arrowGlow3 {
    0%, 25% { color: var(--border-glass); }
    30%, 60% { color: var(--primary); }
    65%, 100% { color: var(--border-glass); }
}

/* Step 4 */
@keyframes cardGlow4 {
    0%, 35% { border-color: var(--border-glass); box-shadow: none; }
    40%, 60% { border-color: var(--primary); box-shadow: 0 10px 25px var(--shadow-cyan); }
    65%, 100% { border-color: var(--border-glass); box-shadow: none; }
}
@keyframes iconBoxGlow4 {
    0%, 35% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
    40%, 60% { background: var(--primary); color: var(--white); }
    65%, 100% { background: rgba(30, 158, 137, 0.1); color: var(--primary); }
}


.hero-main-title {  
    font-family: 'Satoshi', sans-serif;
    font-size: 3rem; /* Font size further reduced */
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2;
    margin-top: -1; /* Ensures no extra spacing at the top */
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.35rem; /* Slightly larger, matching the image */
    font-weight: 400; /* Regular weight for clean reading */
    color: #475569; /* Slate grayish color exactly like the image */
    max-width: 480px; /* Width restricted to keep it completely on the left */
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-transform: none; /* Ensures it doesn't get capitalized */
}

.hero-actions { 
    display: flex; 
    gap: 1.2rem; 
    justify-content: flex-start; /* Left aligned buttons */
}

@media (max-width: 1024px) {
    .dual-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    .hero-text-side { text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-main-title { font-size: 2.4rem; }
    .hero-subtitle { margin: 0 auto 2.5rem auto; }
}

/* --- Component Guidance: Cards & Surfaces --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.glass-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-control);
    padding: 2.5rem;
    transition: transform 0.6s ease, border-color 0.6s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.card-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.glass-card h3 {
    color: var(--foreground);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.glass-card p {
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

.glass-panel {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-control);
    padding: 4rem;
}
.text-center { text-align: center; }

/* --- Footer --- */
footer {
    border-top: 1px solid var(--border-glass);
    padding: 2rem 4rem;
    margin-top: 4rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-content .brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--white);
}

.disclaimer {
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.footer-links { display: flex; gap: 1.5rem; }
.footer-links a {
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.9rem;
}
.footer-links a:hover { color: var(--primary); }

/* --- Electric Circuit Lines (Right Side Only) --- */
.bg-circuit-lines {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    pointer-events: none;
    opacity: 0.6; 
    
    /* Center mein exact logo ki jagah par 0% opacity create karne ke liye Mask */
    -webkit-mask-image: radial-gradient(circle at 50% calc(50% - 100px), transparent 130px, black 160px);
    mask-image: radial-gradient(circle at 50% calc(50% - 100px), transparent 130px, black 160px);
}

.circuit-path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5px;
    stroke-linecap: round;
    
    /* 100px ki single pulse, 1500px ki empty space container fit k lye */
    stroke-dasharray: 100 1500;
    stroke-dashoffset: 1500; 
    filter: drop-shadow(0 0 8px var(--shadow-cyan-strong));
}

/* Har line ka time aur delay thora mukhtalif hai */
.path-1 { animation: circuitFlow 5s linear infinite 1s; }
.path-2 { animation: circuitFlow 9s linear infinite 6s; }
.path-3 { animation: circuitFlow 7s linear infinite 5s; }
.path-4 { animation: circuitFlow 11s linear infinite 2s; }

@keyframes circuitFlow {
    0% {
        stroke-dashoffset: 1500;
        opacity: 0;
    }
    10% {
        opacity: 1; /* Smoothly pop in */
    }
    90% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -300; /* Move to the right side boundary */
        opacity: 0; /* Smoothly fade out */
    }
}

/* ==========================================================================
   Robot Walking & Kicking Animation (Advanced)
   ========================================================================== */


/* --- Robot Main Setup --- */
.robot-character {
    position: absolute;
    bottom: 20px;
    width: 60px;
    height: 115px;
    animation: robotMove 10s linear infinite;
    z-index: 10;
}

.robot-walker-inner {
    position: relative;
    width: 100%;
    height: 100%;
    animation: bodyBounce 10s linear infinite;
}

/* Head */
.robot-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.5rem;
    color: var(--primary);
    z-index: 5;
}

/* Body */
.robot-body {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    background: var(--primary);
    border-radius: 8px 8px 12px 12px;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15);
}

.robot-chest-screen {
    width: 20px;
    height: 8px;
    background: var(--white);
    border-radius: 3px;
    opacity: 0.9;
}

/* Limbs (Arms & Legs) */
.robot-limb {
    position: absolute;
    background: var(--primary);
    border-radius: 6px;
    transform-origin: top center;
}

.robot-arm { width: 8px; height: 32px; top: 55px; }
.robot-leg { width: 10px; height: 38px; top: 80px; }

/* Front Limbs (Lighter / Primary) */
.left-arm { left: 14px; z-index: 6; animation: rightLeg 10s linear infinite; }
.left-leg { left: 18px; z-index: 5; animation: leftLeg 10s linear infinite; }

/* Back Limbs (Darker shade to look 3D) */
.right-arm { left: 38px; z-index: 2; background: var(--primary-gradient-start); animation: leftLeg 10s linear infinite; }
.right-leg { left: 34px; z-index: 3; background: var(--primary-gradient-start); animation: rightLeg 10s linear infinite; }

/* --- Logo Setup --- */
.rolling-logo {
    position: absolute;
    bottom: 20px;
    width: 60px;
    height: 60px;
    animation: logoMove 10s linear infinite;
    z-index: 5;
}

/* --- Keyframes --- */

/* 1. Robot moving to 10% of the screen and stopping */
@keyframes robotMove {
    0% { left: -100px; }
    15% { left: 10%; } /* Screen ki 10% par aakar ruk jayega */
    15.1%, 70% { left: 10%; } /* Kicking aur wait ke dauran yahan khara rahega */
    100% { left: calc(100% + 100px); }
}

/* 2. Natural Football Bounce & Gravity Simulation */
@keyframes logoMove {
    0% { left: -50px; bottom: 20px; transform: rotate(-360deg); animation-timing-function: linear; }
    15% { left: calc(10% + 60px); bottom: 20px; transform: rotate(0deg); } 
    15.1%, 23.9% { left: calc(10% + 60px); bottom: 20px; transform: rotate(0deg); } 
    
    /* 24% Kick Impact - Hawa mein udna (ease-out gravity) */
    24% { left: calc(10% + 60px); bottom: 20px; transform: rotate(0deg); animation-timing-function: ease-out; } 
    
    /* 28% Peak Altitude - Neechy girna (ease-in gravity) */
    28% { left: 30%; bottom: 150px; transform: rotate(360deg); animation-timing-function: ease-in; } 
    
    /* 32% Zameen par First Bounce (ease-out gravity) */
    32% { left: calc(50% - 30px); bottom: 20px; transform: rotate(720deg); animation-timing-function: ease-out; } 
    
    /* 35% Bounce 1 Peak (ease-in) */
    35% { left: calc(50% - 15px); bottom: 70px; transform: rotate(840deg); animation-timing-function: ease-in; } 
    
    /* 38% Zameen par Second Bounce (ease-out) */
    38% { left: calc(50% - 5px); bottom: 20px; transform: rotate(960deg); animation-timing-function: ease-out; } 
    
    /* 40% Bounce 2 Peak (ease-in) */
    40% { left: 50%; bottom: 40px; transform: rotate(1020deg); animation-timing-function: ease-in; } 
    
    /* 42% Zameen par Third Bounce */
    42% { left: 50%; bottom: 20px; transform: rotate(1080deg); animation-timing-function: ease-out; } 
    
    /* 43.5% Final Micro-Bounce */
    43.5% { left: 50%; bottom: 28px; transform: rotate(1110deg); animation-timing-function: ease-in; }
    
    /* 45% Rest (Center mein ruk jana) */
    45%, 70% { left: 50%; bottom: 20px; transform: rotate(1140deg); animation-timing-function: linear; } 
    
    100% { left: calc(100% + 150px); bottom: 20px; transform: rotate(1800deg); }
}

/* 3. Body Bounce (Rukne par jism ka movement band) */
@keyframes bodyBounce {
    0%, 3%, 6%, 9%, 12%, 15% { top: 0; }
    1.5%, 4.5%, 7.5%, 10.5%, 13.5% { top: -4px; }
    16%, 22% { top: 0; }
    24% { top: -6px; } /* Kick karte waqt chota sa hop */
    26%, 70% { top: 0; }
    73%, 79%, 85%, 91%, 97% { top: -4px; }
    71.5%, 76%, 82%, 88%, 94%, 100% { top: 0; }
}

/* 4. Left Leg (Rukne par legs straight ho jayen) */
@keyframes leftLeg { 
    0% { transform: rotate(0deg); }
    3% { transform: rotate(-30deg); }
    6% { transform: rotate(30deg); }
    9% { transform: rotate(-30deg); }
    12% { transform: rotate(30deg); }
    15% { transform: rotate(0deg); } /* Stop walking */
    16%, 70% { transform: rotate(0deg); } /* Stand still */
    73% { transform: rotate(-30deg); }
    76% { transform: rotate(30deg); }
    79% { transform: rotate(-30deg); }
    82% { transform: rotate(30deg); }
    85% { transform: rotate(-30deg); }
    88% { transform: rotate(30deg); }
    91% { transform: rotate(-30deg); }
    94% { transform: rotate(30deg); }
    97% { transform: rotate(-30deg); }
    100% { transform: rotate(0deg); }
}

/* 5. Right Leg (Kicker Leg - Properly timed) */
@keyframes rightLeg { 
    0% { transform: rotate(0deg); }
    3% { transform: rotate(30deg); }
    6% { transform: rotate(-30deg); }
    9% { transform: rotate(30deg); }
    12% { transform: rotate(-30deg); }
    15% { transform: rotate(0deg); } /* Stop walking */
    16%, 22% { transform: rotate(0deg); } /* Stand still */
    
    /* THE KICK SEQUENCE */
    23% { transform: rotate(-45deg); } /* Power ke liye taang peechay ki */
    24% { transform: rotate(90deg); } /* Kick! (Logo 24% par udta hai) */
    27%, 70% { transform: rotate(0deg); } /* Wapas normal position */
    
    73% { transform: rotate(30deg); }
    76% { transform: rotate(-30deg); }
    79% { transform: rotate(30deg); }
    82% { transform: rotate(-30deg); }
    85% { transform: rotate(30deg); }
    88% { transform: rotate(-30deg); }
    91% { transform: rotate(30deg); }
    94% { transform: rotate(-30deg); }
    97% { transform: rotate(30deg); }
    100% { transform: rotate(0deg); }
}

/* ==========================================================================
   Robot 2: Board Pusher (Perfectly Centered, Pushing from Behind)
   ========================================================================== */


/* Board ki Styling - Center Aligned 
.push-board {
    position: absolute;
    bottom: 25px; 
    left: 50%; 
    background: var(--white);
    border: 4px solid var(--foreground); 
    color: var(--foreground);
    font-family: var(--font-display); 
    font-weight: 800; 
    padding: 40px 80px; 
    border-radius: 24px;
    font-size: 2.2rem; 
    box-shadow: none;
    z-index: 10;
    white-space: nowrap; 
    animation: 
        boardEntryExit 12s linear infinite,
        boardLurch 12s linear infinite; 
}

 Pusher Robot - FIX: Margin barha kar bilkul right edge par set kar diya 
.pusher-robot {
    position: absolute; 
    bottom: 20px;
    left: 50%; 
    margin-left: 398px; 
    z-index: 15; 
    animation: 
        robotEntryExit 12s linear infinite,
        robotLurchFlip 12s linear infinite; 
}
 */       
/* ============================================================
   PUSHER ROBOT POSITION + LIMB CONTROL
   ============================================================ */

/* Default: robot pushing pose */
.pusher-robot .robot-walker-inner {
    transform-origin: bottom center !important;
    transform: rotate(-18deg) !important;
    animation: none !important;
}

/* Arms stay in pushing position */
.pusher-robot .robot-arm {
    animation: none !important;
    transform: rotate(93deg) !important;
    top: 52px !important;
}

.pusher-robot .left-arm {
    left: 16px !important;
}

.pusher-robot .right-arm {
    left: 26px !important;
}

/* Default: legs stopped */
.pusher-leg-left,
.pusher-leg-right {
    animation: none !important;
    animation-play-state: paused !important;
    transform: rotate(0deg);
}

/* ------------------------------------------------------------
   WHILE ROBOT IS SCROLLING TOWARDS CENTER
   ------------------------------------------------------------ */

.pusher-robot.is-scrolling:not(.at-center) .pusher-leg-left {
    animation: walkStopPusher 1.7s linear infinite !important;
    animation-play-state: running !important;
}

.pusher-robot.is-scrolling:not(.at-center) .pusher-leg-right {
    animation: walkStopPusherReverse 1.7s linear infinite !important;
    animation-play-state: running !important;
}

/* ------------------------------------------------------------
   WHEN BOARD REACHES CENTER
   ------------------------------------------------------------ */

/* Robot becomes completely straight */
.pusher-robot.at-center .robot-walker-inner {
    transform: rotate(0deg) !important;
}

/* Center par robot ke hands normal/down position mein */
.pusher-robot.at-center .robot-arm {
    transform: rotate(0deg) !important;
    top: 55px !important;
}

/* Stop both legs at center */
.pusher-robot.at-center .pusher-leg-left,
.pusher-robot.at-center .pusher-leg-right {
    animation: none !important;
    animation-play-state: paused !important;
    transform: rotate(0deg) !important;
}
/* ==========================================================================
   Pusher Animation Keyframes (4-Second Slow Return & Perfect Sync)
   ========================================================================== */

/* 1. Board Entry (Arrival -> 5s Stay -> Robot goes back -> 2s Fadeout) */
@keyframes boardEntryExit {
    0% { left: 150%; opacity: 1; }
    42% { left: 50%; opacity: 1; } /* 5s mein center pohncha */
    83% { left: 50%; opacity: 1; } /* Jab tak robot wapas gaya, board wahi ruka raha */
    100% { left: 50%; opacity: 0; } /* Aakhri 2 seconds mein smooth fade out */
}

/* 2. Board Lurching */
@keyframes boardLurch {
    0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40% { transform: translateX(-50%); }
    2.5%, 7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5% { transform: translateX(calc(-50% - 25px)); } 
    42.1%, 100% { transform: translateX(-50%); } 
}

/* 3. Robot Movement (Wapsi ka safar ab 4 seconds / 33.3% ka hai) */
@keyframes robotEntryExit {
    0% { left: 150%; }
    42% { left: 50%; } /* Center pohncha */
    50% { left: 50%; } /* 1 sec rest */
    83.3% { left: 100%; } /* 50% se 83.3% tak (exact 4 seconds) aaram-aaram se wapas gaya */
    100% { left: 150%; }
}

/* 4. Robot Lurching and Flipping */
@keyframes robotLurchFlip {
    0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40% { transform: translateX(0) scaleX(-1); } 
    2.5%, 7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5% { transform: translateX(-25px) scaleX(-1); } 
    42.1%, 49.9% { transform: translateX(0) scaleX(-1); } 
    50%, 83.2% { transform: translateX(0) scaleX(1); } /* 50% par flip ho kar aaram se wapas */
    83.3%, 100% { transform: translateX(0) scaleX(-1); } 
}

/* 5. Push While Leaning */
@keyframes pusherLean {
    0%, 41.9% { transform: rotate(15deg); } 
    42%, 100% { transform: rotate(0deg); }  /* Center par seedha */
}

/* 6. Left Arm Animation (Wapsi ke 4 seconds ke liye slow swing) */
@keyframes pusherLeftArm {
    0%, 41.9% { transform: rotate(-90deg); } 
    42%, 49.9% { transform: rotate(0deg); }  
    
    /* 50% se 83.3% tak aaram-aaram se arms hilenge */
    54% { transform: rotate(-55deg); }
    59% { transform: rotate(55deg); }
    64% { transform: rotate(-55deg); }
    69% { transform: rotate(55deg); }
    74% { transform: rotate(-55deg); }
    79% { transform: rotate(55deg); }
    
    83.4%, 100% { transform: rotate(0deg); }
}

/* 7. Right Arm Animation (Behind body - Slow swing) */
@keyframes pusherRightArm {
    0%, 41.9% { transform: rotate(-90deg); } 
    42%, 49.9% { transform: rotate(0deg); }  
    
    /* 50% se 83.3% tak opposite slow swing */
    54% { transform: rotate(55deg); }
    59% { transform: rotate(-55deg); }
    64% { transform: rotate(55deg); }
    69% { transform: rotate(-55deg); }
    74% { transform: rotate(55deg); }
    79% { transform: rotate(-55deg); }
    
    83.4%, 100% { transform: rotate(0deg); }
}

/* 8. Left Leg (Slow walk back over 4 seconds) */
@keyframes walkStopPusher {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(-30deg); }
    10% { transform: rotate(30deg); }
    15% { transform: rotate(-30deg); }
    20% { transform: rotate(30deg); }
    25% { transform: rotate(-30deg); }    
    30% { transform: rotate(30deg); }
    35% { transform: rotate(-30deg); }
    40% { transform: rotate(30deg); }
    42%, 50% { transform: rotate(0deg); } /* Center rest */
    
    56% { transform: rotate(-30deg); }
    62% { transform: rotate(30deg); }
    68% { transform: rotate(-30deg); }
    74% { transform: rotate(30deg); }
    80% { transform: rotate(-30deg); }
    
    83.3%, 100% { transform: rotate(0deg); }
}

/* 9. Right Leg (Slow walk back over 4 seconds) */
@keyframes walkStopPusherReverse {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(30deg); }
    10% { transform: rotate(-30deg); }
    15% { transform: rotate(30deg); }
    20% { transform: rotate(-30deg); }
    25% { transform: rotate(30deg); } 
    30% { transform: rotate(-30deg); }
    35% { transform: rotate(30deg); }
    40% { transform: rotate(-30deg); }
    42%, 50% { transform: rotate(0deg); } /* Center rest */
    
    56% { transform: rotate(30deg); }
    62% { transform: rotate(-30deg); }
    68% { transform: rotate(30deg); }
    74% { transform: rotate(-30deg); }
    80% { transform: rotate(30deg); }
    
    83.3%, 100% { transform: rotate(0deg); }
}

/* ==========================================================================
   Browser Mockup & Sisca PC Dashboard UI
   ========================================================================== */

.browser-mockup {
    background: var(--background);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    box-shadow: 0 20px 40px var(--shadow-cyan);
    width: 100%;
    /* FIX: Width ko 800px se barha kar 1050px kar diya (Chaurai zyada ho gayi) */
    max-width: 1050px; 
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Top Bar (Mac Style) --- */
.browser-header {
    background: var(--primary);
    border-bottom: 1px solid var(--border-glass);
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.browser-dots { display: flex; gap: 8px; width: 60px; }
.browser-dots .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.browser-dots .dot:nth-child(1) { background: #FF5F56; } /* Red */
.browser-dots .dot:nth-child(2) { background: #FFBD2E; } /* Yellow */
.browser-dots .dot:nth-child(3) { background: #27C93F; } /* Green */

.browser-url {
    background: transparent;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    padding: 5px 20px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 1.5px;
    text-align: center;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* --- Sisca Logo inside URL bar --- */
.url-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    
}

.browser-spacer { width: 60px; }

/* --- 3-Column Layout --- */
.browser-content {
    background: var(--background);
    display: block;
    padding: 0;
    overflow: hidden; 
    
    /* FIX: Box ki length ko neechay se cut karne ke liye height ko set kiya hai. 
       Ye neechay wali extra safaid jagah ko bilkul khatam kar dega! */
    height: auto !important; 
    min-height: 0 !important;
}

.dashboard-sidebar, .dashboard-middle, .dashboard-right {
    background: var(--background);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* --- Left Sidebar (Teal Color) --- */
.dashboard-sidebar {
    background: var(--primary); /* Image mein purple tha, humne teal kiya brand match ke liye */
    color: var(--white);
}
.sidebar-header { font-size: 0.85rem; font-weight: 600; margin-bottom: 2rem; opacity: 0.9; cursor: pointer; }
.profile-card { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.profile-avatar {
    width: 45px; height: 45px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem;
}
.profile-card h4 { margin: 0; font-size: 1.1rem; color: var(--white); }
.profile-card p { margin: 0; font-size: 0.8rem; opacity: 0.8; }

.sidebar-stats {
    background: var(--white);
    color: var(--foreground);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.stat-box { display: flex; justify-content: space-between; align-items: center; }
.stat-label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.stat-value {
    font-size: 1.3rem; font-weight: 800; color: var(--primary);
    border: 2px solid var(--primary); padding: 5px 10px; border-radius: 50%;
}
.stat-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 10px; }
.stat-box-grid strong { display: block; font-size: 0.9rem; margin-top: 2px; }

/* --- Panels (Middle & Right Shared) --- */
.panel-header {
    display: flex; align-items: flex-start; gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 1rem;
}
.panel-header i {
    color: var(--primary); font-size: 1.2rem;
    background: rgba(30, 158, 137, 0.1);
    padding: 10px; border-radius: 8px;
}
.panel-header h4 { margin: 0 0 4px 0; font-size: 0.95rem; color: var(--foreground); }
.panel-header p { margin: 0; font-size: 0.8rem; color: var(--muted-foreground); }

/* --- Middle Action Panel --- */
.centered-panel {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center; padding: 2rem;
}
.agent-pulse-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(30, 158, 137, 0.1);
    border: 2px dashed var(--primary);
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem; color: var(--primary);
    margin-bottom: 1.5rem;
    animation: spinSlow 15s linear infinite;
}
.agent-pulse-ring i { animation: spinSlowReverse 15s linear infinite; } /* Icon ko seedha rakhega */
@keyframes spinSlow { 100% { transform: rotate(360deg); } }
@keyframes spinSlowReverse { 100% { transform: rotate(-360deg); } }
.centered-panel h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--foreground); }
.centered-panel p { font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 1rem; max-width: 250px; }

/* --- Right Chat Logs Panel --- */
.chat-panel { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.alert-msg { padding: 10px; background: rgba(30, 158, 137, 0.05); border-radius: 8px; }
.alert-tag { display: block; font-size: 0.7rem; font-weight: 700; color: var(--primary); letter-spacing: 1px; margin-bottom: 3px; }
.chat-message.agent { margin-top: 1rem; }
.chat-bubble {
    background: var(--surface-alt);
    padding: 1rem; border-radius: 0 12px 12px 12px;
    font-size: 0.9rem; color: var(--foreground);
    border: 1px solid var(--border-glass);
}
.chat-time { display: block; font-size: 0.65rem; color: var(--muted-foreground); margin-top: 8px; font-weight: 600; text-transform: uppercase; }

/* Responsive View */
@media (max-width: 1024px) {
    .browser-content { grid-template-columns: 1fr; }
    .browser-url { min-width: 150px; }
}

/* --- Sisca PC Video Styling --- */
.sisca-pc-video {
    width: 100%;
    /* FIX: 90px uper cut karne ki logic wese hi rakhi hai */
    height: auto !important; 
    margin-top: -65px; 
    
    /* Cover isay chaurai aur lambai ke hisaab se perfect fit karega baghair stretch kiye */
    object-fit: cover; 
    object-position: center top; 
    display: block;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ==========================================================================
   Sisca Winning Flow Card (Sequential Cascade Animation)
   ========================================================================== */

.flow-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rem; /* Space between animation and card */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Stacks on mobile */
}

.flow-card {
    background: var(--white);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    box-shadow: 0 15px 35px var(--shadow-cyan);
    width: 100%;
    
    /* FIX: Card ki overall chaurai 550px se kam kar ke 450px kar di */
    max-width: 520px; 
    /* FIX: Card ke andar ki khali jagah (padding) 2.5rem se kam kar ke 1.8rem kar di */
    padding: 2.2rem; 
    
    text-align: left;
}

.flow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    /* FIX: Header aur steps ke darmiyan fasla kam kiya */
    margin-bottom: 1.8rem; 
}

.flow-title {
    font-size: 1.4rem; 
    color: var(--foreground);
    margin: 0 0 4px 0;
    
    /* FIX: Main header wala font apply kar diya */
    font-family: var(--font-display); 
    font-weight: 700;
}

.flow-subtitle {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* --- Live Badge --- */
.live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(30, 158, 137, 0.1);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulseLive 2s infinite;
}

@keyframes pulseLive {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}
/* --- Flow Steps & Glowing 2D Checkmarks --- */
.flow-steps {
    display: flex;
    flex-direction: column;
    
    /* FIX: Har step (line) ke darmiyan vertical fasla kam kiya */
    gap: 1.3rem; 
    
    /* FIX: Steps aur progress bar ke darmiyan fasla kam kiya */
    margin-bottom: 2rem; 
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Base Inactive State for Checkmark */
.step-check {
    position: relative; /* FIX: Quarter circle ko set karne ke liye relative zaroori hai */
    color: rgba(0,0,0,0.1); 
    font-size: 1.2rem;
    
    /* FIX: Width/Height thori barha di taaky ring (circle) perfectly fit ho */
    width: 24px; 
    height: 24px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    margin-top: -6px;
}

/* FIX: Checkmark ke oopar Arc (Semi-circle se thora zyada yani 270 degrees) */
.step-check::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    /* FIX: Poore circle par border lagaya, aur sirf ek side (top) transparent ki */
    border: 3px solid currentColor;
    border-top-color: transparent; 
    
    /* FIX: Khali hissay (gap) ko ghuma kar top-right par le gaye jahan checkmark ka sira hota hai */
    transform: rotate(55deg); 
}

/* Base Inactive State for Text */
.step-title {
    /* FIX: Subheading wala futuristic font (Michroma) laga diya */
    font-family: 'Michroma', sans-serif; 
    
    /* Michroma font naturally thora chaura (wide) hota hai isliye size aur width adjust ki hai */
    font-size: 0.75rem; 
    width: 105px; 
    
    font-weight: 800;
    color: #A0AAB2;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.step-text {
    /* FIX: Font family body wali (General Sans) apply kar di gayi hai */
    font-family: var(--font-body); 
    
    font-size: 1.rem;
    color: #A0AAB2;
    font-weight: 500; /* Font weight thora light kiya taaky reading mein asaan ho */
    transition: all 0.3s ease;
}

/* --- Cumulative Animations (Icon, Heading, aur Text teeno ON rahenge) --- */
/* --- Cumulative Animations --- */

.step-1 .step-check { animation: checkCumul1 6s infinite; }
/* FIX: Heading aur Text ki animations alag alag kar di gayi hain */
.step-1 .step-title { animation: titleCumul1 6s infinite; } 
.step-1 .step-text { animation: textCumul1 6s infinite; }

.step-2 .step-check { animation: checkCumul2 6s infinite; }
.step-2 .step-title { animation: titleCumul2 6s infinite; }
.step-2 .step-text { animation: textCumul2 6s infinite; }

.step-3 .step-check { animation: checkCumul3 6s infinite; }
.step-3 .step-title { animation: titleCumul3 6s infinite; }
.step-3 .step-text { animation: textCumul3 6s infinite; }

.step-4 .step-check { animation: checkCumul4 6s infinite; }
.step-4 .step-title { animation: titleCumul4 6s infinite; }
.step-4 .step-text { animation: textCumul4 6s infinite; }

.step-5 .step-check { animation: checkCumul5 6s infinite; }
.step-5 .step-title { animation: titleCumul5 6s infinite; }
.step-5 .step-text { animation: textCumul5 6s infinite; }

.step-6 .step-check { animation: checkCumul6 6s infinite; }
.step-6 .step-title { animation: titleCumul6 6s infinite; }
.step-6 .step-text { animation: textCumul6 6s infinite; }

/* FIX: Checkmark icon ko bara aur center-bottom set karne ke liye */
.step-check i {
    font-size: 1.6rem; /* Icon ko thora bara kar diya */
    /* X aur Y axis par move kiya: Thora sa left aur neechay ki taraf*/
    transform: translate(4.5px, 2.1px); 
}

/* 1. Cumulative Checkmarks (Icon) */
@keyframes checkCumul1 { 0%, 95% { color: var(--primary); transform: scale(1.1); } 96%, 100% { color: rgba(0,0,0,0.1); transform: scale(1); } }
@keyframes checkCumul2 { 0%, 15% { color: rgba(0,0,0,0.1); transform: scale(1); } 16%, 95% { color: var(--primary); transform: scale(1.1); } 96%, 100% { color: rgba(0,0,0,0.1); transform: scale(1); } }
@keyframes checkCumul3 { 0%, 32% { color: rgba(0,0,0,0.1); transform: scale(1); } 33%, 95% { color: var(--primary); transform: scale(1.1); } 96%, 100% { color: rgba(0,0,0,0.1); transform: scale(1); } }
@keyframes checkCumul4 { 0%, 49% { color: rgba(0,0,0,0.1); transform: scale(1); } 50%, 95% { color: var(--primary); transform: scale(1.1); } 96%, 100% { color: rgba(0,0,0,0.1); transform: scale(1); } }
@keyframes checkCumul5 { 0%, 65% { color: rgba(0,0,0,0.1); transform: scale(1); } 66%, 95% { color: var(--primary); transform: scale(1.1); } 96%, 100% { color: rgba(0,0,0,0.1); transform: scale(1); } }
@keyframes checkCumul6 { 0%, 82% { color: rgba(0,0,0,0.1); transform: scale(1); } 83%, 95% { color: var(--primary); transform: scale(1.1); } 96%, 100% { color: rgba(0,0,0,0.1); transform: scale(1); } }

/* 2. Cumulative Titles (Heading ab Teal color mein glow karegi aur thori bold hogi) */
@keyframes titleCumul1 { 
    0%, 95% { color: var(--primary); text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); } 
    96%, 100% { color: #A0AAB2; text-shadow: none; } 
}
@keyframes titleCumul2 { 
    0%, 15% { color: #A0AAB2; text-shadow: none; } 
    16%, 95% { color: var(--primary); text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); } 
    96%, 100% { color: #A0AAB2; text-shadow: none; } 
}
@keyframes titleCumul3 { 
    0%, 32% { color: #A0AAB2; text-shadow: none; } 
    33%, 95% { color: var(--primary); text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); } 
    96%, 100% { color: #A0AAB2; text-shadow: none; } 
}
@keyframes titleCumul4 { 
    0%, 49% { color: #A0AAB2; text-shadow: none; } 
    50%, 95% { color: var(--primary); text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); } 
    96%, 100% { color: #A0AAB2; text-shadow: none; } 
}
@keyframes titleCumul5 { 
    0%, 65% { color: #A0AAB2; text-shadow: none; } 
    66%, 95% { color: var(--primary); text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); } 
    96%, 100% { color: #A0AAB2; text-shadow: none; } 
}
@keyframes titleCumul6 { 
    0%, 82% { color: #A0AAB2; text-shadow: none; } 
    83%, 95% { color: var(--primary); text-shadow: 0.5px 0 0 var(--primary), -0.5px 0 0 var(--primary); } 
    96%, 100% { color: #A0AAB2; text-shadow: none; } 
}

/* 3. Cumulative Text (Normal Text abhi bhi Dark color mein hi glow karega) */
@keyframes textCumul1 { 0%, 95% { color: var(--foreground); } 96%, 100% { color: #A0AAB2; } }
@keyframes textCumul2 { 0%, 15% { color: #A0AAB2; } 16%, 95% { color: var(--foreground); } 96%, 100% { color: #A0AAB2; } }
@keyframes textCumul3 { 0%, 32% { color: #A0AAB2; } 33%, 95% { color: var(--foreground); } 96%, 100% { color: #A0AAB2; } }
@keyframes textCumul4 { 0%, 49% { color: #A0AAB2; } 50%, 95% { color: var(--foreground); } 96%, 100% { color: #A0AAB2; } }
@keyframes textCumul5 { 0%, 65% { color: #A0AAB2; } 66%, 95% { color: var(--foreground); } 96%, 100% { color: #A0AAB2; } }
@keyframes textCumul6 { 0%, 82% { color: #A0AAB2; } 83%, 95% { color: var(--foreground); } 96%, 100% { color: #A0AAB2; } }

/* --- Footer Progress Bar --- */
.flow-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.progress-bar-container {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.05);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    
    /* FIX: Loading bar ki sharp edge ko gol (curved) karne ke liye border-radius lagaya */
    border-radius: 20px; 
    
    animation: fillProgress 6s ease-in-out infinite; 
}

/* Jab tak card active na ho, progress bar ki animation bhi off rahegi */
.flow-card:not(.content-active) .progress-bar-fill {
    animation: none !important;
}

/* Jab card active ho jaye, tabhi progress bar fill hona shuru ho ga */
.flow-card.content-active .progress-bar-fill {
    animation-play-state: running !important;
}

/* FIX: Bar ab glow hone se theek pehle slide karegi, taaky dono ka action 100% ek sath mukammal ho */
@keyframes fillProgress {
    0% { width: 0%; }
    
    /* 11% se 16% tak slide ho kar exactly 16% par pohnchegi, jahan Step 2 glow hota hai */
    8%, 11% { width: 16.6%; } 
    19%, 28% { width: 33.3%; } 
    
    /* 28% se 33% tak slide ho kar exactly 33% par pohnchegi, jahan Step 3 glow hota hai */
    43%, 48% { width: 50%; }
    
    /* Aur isi tarah aagay... */
    59%, 61% { width: 66.6%; }
    79%, 81% { width: 83.3%; }
    82%, 96% { width: 100%; }
    
    /* Loop ke aakhir mein reset */
    97%, 100% { width: 0%; } 
}

/* ==========================================================================
   Agent Swarm Consensus & Assignment Animation
   ========================================================================== */

.swarm-animation-container {
    position: relative;
    width: 400px;
    height: 450px;
    flex-shrink: 0;
    margin-top: 4.5rem;

    /* Single source of truth for the Manager node's vertical position.
       Packet keyframes read this too, so they always fly to wherever
       the Manager actually is — desktop or mobile. */
    --manager-y: 5%;
}

/* --- Nodes & Icons --- */
.expert-node {
    position: absolute;
    top: var(--manager-y);
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.expert-icon {
    width: 65px;
    height: 65px;
    background: var(--white);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--primary);
    margin: 0 auto 8px auto;

    /* Glow ab JS control karega */
    transition:
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.consensus-node {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.consensus-icon {
    width: 55px;
    height: 55px;
    background: var(--surface-glass);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 0 15px var(--shadow-cyan);
    border: 2px dashed var(--primary);
    margin: 0 auto 8px auto;

    /* Glow ab JS control karega */
    transition:
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.node-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--background);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}



/* ==========================================================================
   AGENTS FLY-IN & CONTINUOUS PULSE ANIMATION
   ========================================================================== */

.swarm-agent {
    position: absolute;
    width: 45px; height: 45px;
    background: var(--white);
    border: 1.5px solid var(--border-glass);
    color: var(--muted-foreground);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    z-index: 5;
    transform: translate(-50%, -50%);
    opacity: 0; 
}

/* Scroll (content-active) hote hi pehle Fly-in karenge, phir purana Pulse start hoga */
.swarm-animation-container.content-active .agent-1 {
    animation: flyIn1 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards, agentPulse1 10s infinite 0.8s;
}
.swarm-animation-container.content-active .agent-2 {
    animation: flyIn2 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards, agentPulse1 10s infinite 0.9s;
}
.swarm-animation-container.content-active .agent-3 {
    animation: flyIn3 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards, agentPulse2 10s infinite 1.0s;
}
.swarm-animation-container.content-active .agent-4 {
    animation: flyIn4 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards, agentPulse1 10s infinite 1.1s;
}
.swarm-animation-container.content-active .agent-5 {
    animation: flyIn5 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards, agentPulse2 10s infinite 1.2s;
}
.swarm-animation-container.content-active .agent-6 {
    animation: flyIn6 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards, agentPulse2 10s infinite 1.3s;
}

/* Har Agent Mukhtalif angle (bahar) se circle ke andar aayega */
@keyframes flyIn1 { 
    0% { opacity: 0; transform: translate(calc(-50% - 100px), calc(-50% - 100px)); } 
    100% { opacity: 1; transform: translate(-50%, -50%); } 
}
@keyframes flyIn2 { 
    0% { opacity: 0; transform: translate(calc(-50% + 100px), calc(-50% - 100px)); } 
    100% { opacity: 1; transform: translate(-50%, -50%); } 
}
@keyframes flyIn3 { 
    0% { opacity: 0; transform: translate(calc(-50% - 150px), -50%); } 
    100% { opacity: 1; transform: translate(-50%, -50%); } 
}
@keyframes flyIn4 { 
    0% { opacity: 0; transform: translate(calc(-50% + 150px), -50%); } 
    100% { opacity: 1; transform: translate(-50%, -50%); } 
}
@keyframes flyIn5 { 
    0% { opacity: 0; transform: translate(calc(-50% - 100px), calc(-50% + 100px)); } 
    100% { opacity: 1; transform: translate(-50%, -50%); } 
}
@keyframes flyIn6 { 
    0% { opacity: 0; transform: translate(calc(-50% + 100px), calc(-50% + 100px)); } 
    100% { opacity: 1; transform: translate(-50%, -50%); } 
}

/* Agent coordinates (Radial pattern around consensus node at 60%, 50%) */
.agent-1 { top: 35%; left: 15%; }
.agent-2 { top: 35%; left: 85%; }
.agent-3 { top: 60%; left: 5%; }
.agent-4 { top: 60%; left: 95%; }
.agent-5 { top: 85%; left: 25%; }
.agent-6 { top: 85%; left: 75%; }

/* --- Data Packets --- */
.packet {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
}

/* Phase 1: Opinions & Votes sent to Consensus (0s - 3s) */
.vote-packet { 
    width: 8px; height: 8px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    animation: sendVote 10s infinite; 
}
.v-1 { --start-y: 35%; --start-x: 15%; animation-delay: 0.1s; }
.v-2 { --start-y: 35%; --start-x: 85%; animation-delay: 0.3s; }
.v-3 { --start-y: 60%; --start-x: 5%; animation-delay: 0.2s; }
.v-4 { --start-y: 60%; --start-x: 95%; animation-delay: 0.4s; }
.v-5 { --start-y: 85%; --start-x: 25%; animation-delay: 0.5s; }
.v-6 { --start-y: 85%; --start-x: 75%; animation-delay: 0.0s; }

@keyframes sendVote {
    0%, 5% { top: var(--start-y); left: var(--start-x); opacity: 0; transform: translate(-50%, -50%) scale(1); }
    10% { opacity: 1; }
    25% { top: 60%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    28%, 100% { opacity: 0; }
}


/* Phase 2: Top 2 Recommended Solutions sent to Senior Expert (4s - 6s) */
.solution-packet {
    width: 14px; height: 14px;
    background: #FFBD2E; /* Distinct amber for recommendations */
    border: 2px solid var(--white);
    box-shadow: 0 0 15px #FFBD2E;
    animation: sendSolution 10s infinite;
}
.s-2 {
    width: 10px; height: 10px;
    background: #27C93F; /* Secondary solution */
    box-shadow: 0 0 12px #27C93F;
    animation-delay: 0.4s;
}

@keyframes sendSolution {
    0%, 35% { top: 60%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    55% { top: var(--manager-y); left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    58%, 100% { opacity: 0; }
}

@keyframes expertProcess {
    0%, 50% { box-shadow: 0 0 20px rgba(0,0,0,0.1); border-color: var(--primary); background: var(--white); color: var(--primary); }
    55%, 75% { box-shadow: 0 0 40px #FFBD2E; border-color: #FFBD2E; background: var(--primary); color: var(--white); transform: scale(1.05); }
    80%, 100% { box-shadow: 0 0 20px rgba(0,0,0,0.1); border-color: var(--primary); background: var(--white); color: var(--primary); transform: scale(1); }
}

/* Phase 3: Expert approves & assigns tasks to relevant agents (7s - 9s) */
.task-packet { 
    width: 10px; height: 10px;
    background: var(--foreground);
    box-shadow: 0 0 12px var(--foreground);
    animation: sendTask 10s infinite; 
}
.t-1 { --end-y: 35%; --end-x: 15%; animation-delay: 0.1s; } /* Assigning to agent 1 */
.t-2 { --end-y: 35%; --end-x: 85%; animation-delay: 0.3s; } /* Assigning to agent 2 */
.t-4 { --end-y: 60%; --end-x: 95%; animation-delay: 0.2s; } /* Assigning to agent 4 */

@keyframes sendTask {
    0%, 72% { top: var(--manager-y); left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    90% { top: var(--end-y); left: var(--end-x); opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    92%, 100% { opacity: 0; }
}

/* Highlight specifically assigned agents upon receiving tasks */
@keyframes agentPulse1 {
    0%, 88% { border-color: var(--border-glass); color: var(--muted-foreground); background: var(--white); }
    90%, 98% { border-color: var(--primary); color: var(--white); background: var(--primary); box-shadow: 0 0 20px var(--primary); transform: translate(-50%, -50%) scale(1.1); }
    100% { border-color: var(--border-glass); color: var(--muted-foreground); background: var(--white); transform: translate(-50%, -50%) scale(1); }
}

@keyframes agentPulse2 {
    0%, 88% { border-color: var(--border-glass); color: var(--muted-foreground); background: var(--white); }
    90%, 98% { border-color: var(--white); color: var(--muted-foreground); background: var(--white); box-shadow: 0 0 20px var(--primary); transform: translate(-50%, -50%) scale(1); }
    100% { border-color: var(--border-glass); color: var(--muted-foreground); background: var(--white); transform: translate(-50%, -50%) scale(1); }
}


/* Play animations when the .start-animation class is triggered by scroll */
.start-animation .push-board,
.start-animation .pusher-robot,
.start-animation .robot-walker-inner,
.start-animation .robot-arm,
.start-animation .left-arm,
.start-animation .right-arm,
.start-animation .pusher-leg-left,
.start-animation .pusher-leg-right {
    animation-play-state: running !important;
}

/* ==========================================================================
   Helpers Icons Section (Circular Orbit Animation)
   ========================================================================== */
.helpers-icon-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 4rem auto 2rem auto;
    border-radius: 50%;
    /* Ek halki si dashed line circle ki track show karne ke liye */
    border: 2px dashed rgba(30, 158, 137, 0.2); 
    display: block;
    
    /* Poore circle ko 20 seconds mein ghumane ki animation */
    animation: spinOrbit 20s linear infinite;
}

.helpers-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: var(--surface-glass);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px var(--shadow-cyan);
    border: 2px solid var(--primary);
    z-index: 10;
    
    /* Center logo ko ulta hone se bachane ke liye counter-spin */
    animation: counterSpinOrbit 20s linear infinite;
}

.helpers-center-logo img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.helper-icon-box {
    position: absolute;
    width: 75px;
    height: 75px;
    background: var(--white);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    cursor: pointer;
    z-index: 5;
    
    /* Icons ko apni jagah seedha rakhne ke liye counter-spin */
    animation: counterSpinOrbit 20s linear infinite;
}


.helper-icon-box:hover {
    border-color: var(--primary);
    box-shadow: 0 15px 35px var(--shadow-cyan);
}

/* --- Placing 6 icons in a perfect circular layout --- */
.helper-icon-box:nth-child(2) { top: 0%; left: 50%; }

/* Top Right (Analytics) */
.helper-icon-box:nth-child(3) { top: 25%; left: 93.3%; }

/* Bottom Right (Marketing) */
.helper-icon-box:nth-child(4) { top: 75%; left: 93.3%; }

/* Bottom Center (Calendar) */
.helper-icon-box:nth-child(5) { top: 100%; left: 50%; }

/* Bottom Left (Database) */
.helper-icon-box:nth-child(6) { top: 75%; left: 6.7%; }

/* Top Left (Terminal) */
.helper-icon-box:nth-child(7) { top: 25%; left: 6.7%; }

/* --- Keyframes for Orbit Rotation --- */
@keyframes spinOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counterSpinOrbit {
    /* Translate(-50%, -50%) icons ko unke exact center point par rakhta hai */
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}


/* Merged Footer Links Hover Fix */
.merged-links a { transition: opacity 0.3s ease; }
.merged-links a:hover { color: var(--white) !important; opacity: 0.6; }

/* ==========================================================================
   Newsletter Form Styling
   ========================================================================== */
.newsletter-form {
    display: flex;
    max-width: 550px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1); /* Halka sa glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    padding: 6px;
    backdrop-filter: blur(10px);
}

.newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Newsletter Subscribe Button (Matches Back to Home Button) */
.newsletter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white); /* Teal text */
    font-family: 'Inter', sans-serif;
    font-weight: 550;
    font-size: 1.05rem;
    padding: 0.8rem 2rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--primary);
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
}

.newsletter-btn:hover {
    background: #0DC1C1; /* Hover par Teal background */
    color: var(--white); /* Hover par White text */
    box-shadow: none; /* Glowing shadow khatam kar diya */
}

/* Mobile Responsiveness ke liye */
@media (max-width: 500px) {
    .newsletter-form {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 15px;
    }
    .newsletter-input {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-pill);
        text-align: center;
    }
    .newsletter-btn {
        width: 100%;
        padding: 1rem;
    }
}

/* ==========================================================================
   Quick Message Form Styling
   ========================================================================== */
.contact-form-container {
    background-color: #0A221C; /* Dark navy-slate matching the image */
    border: 1px solid rgba(30, 158, 137, 0.2);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 15px 35px rgba(13, 82, 70, 0.562);
}

.form-title {
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: none;
    letter-spacing: 0.5px;
}

.form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.form-group.half {
    flex: 1;
    margin-bottom: 0;
}

.contact-form label {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    background-color: #123A32; /* Slightly lighter input background */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
    background-color: #164A40;
}

.phone-input-wrapper {
    display: flex;
    gap: 0.8rem;
}

.phone-input-wrapper select {
    width: 110px;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.phone-input-wrapper input {
    flex: 1;
}

.submit-btn {
    width: 100%;
    background-color: #0DC1C1; /* Bright teal matching the image */
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.submit-btn:hover {
    background-color: var(--primary);
    box-shadow: 0 4px 15px var(--shadow-cyan-strong);
}

/* Form Mobile Responsiveness */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 1.2rem;
    }
    .phone-input-wrapper {
        flex-direction: column;
    }
    .phone-input-wrapper select {
        width: 100%;
    }
    .contact-form-container {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   Back to Home Button Styling (Swapped Colors)
   ========================================================================== */
.back-home-btn {
    background-color: var(--primary) !important; /* Normal state teal */
    color: var(--white) !important;              /* Normal text white */
    border: 1px solid var(--primary) !important;
    transition: all 0.3s ease;
}

.back-home-btn:hover {
    background-color: var(--white) !important;   /* Hover state white */
    color: var(--primary) !important;            /* Hover text teal */
    border-color: var(--white) !important;
}

/* ==========================================================================
   Fade Up Animation for Hero Text & Elements
   ========================================================================== */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px); /* Neechay se start hoga */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* Apni asal position par aa jayega */
    }
}

.popup-animated {
    animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sequential delay for smooth flow */
.popup-delay-1 { animation-delay: 0.1s; }
.popup-delay-2 { animation-delay: 0.3s; }
.popup-delay-3 { animation-delay: 0.5s; }

/* Scroll Zoom-In & Fade Card Animation */
.scroll-fade-card {
    opacity: 0;
    transform: translateY(40px) scale(0.92); /* Shuru mein thora chota aur neechay hoga */
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* Scroll karte hi zoom-in ho kar full size mein aa jayega */
}

/* Jab tak card active na ho, steps par animations bilkul off rahengi */
.flow-card:not(.content-active) .flow-step *,
.flow-card:not(.content-active) .flow-step {
    animation: none !important;
}

/* Jab card active ho jaye, tabhi animations run hongi */
.flow-card.content-active .flow-step {
    animation-play-state: running !important;
}

/* ==========================================================================
   PACKETS DELAYED START (WAIT FOR AGENTS TO ASSEMBLE)
   ========================================================================== */
/* Packets tab tak ruke rahenge jab tak network mukammal na ban jaye */
.swarm-animation-container:not(.packets-active) .packet {
    animation-play-state: paused !important;
    opacity: 0 !important;
}

/* Jese hi 'packets-active' class aayegi (1.3s baad), packets chalna shuru honge */
.swarm-animation-container.packets-active .packet {
    animation-play-state: running !important;
}

/* Jab tak process section active na ho, Cards, Icons, aur Arrows ki animations pause rahengi */
.process-cards-wrapper:not(.content-active) [class*="auto-glow-"],
.process-cards-wrapper:not(.content-active) .process-icon-box,
.process-cards-wrapper:not(.content-active) [class*="auto-arrow-"] {
    animation-play-state: paused !important;
}

/* Jab section active ho, toh sabhi elements ki animations chalne lagengi */
.process-cards-wrapper.content-active [class*="auto-glow-"],
.process-cards-wrapper.content-active .process-icon-box,
.process-cards-wrapper.content-active [class*="auto-arrow-"] {
    animation-play-state: running !important;
}

.pusher-group {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    z-index: 10;
    pointer-events: none;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.1s ease-out;
}


.robot-animation-container {
    position: relative;
    width: 100%;
    min-height: 350px;
    margin-top: 9rem;
    overflow: hidden;
}

.push-board {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    display: block;
    background: var(--white);
    color: var(--foreground);
    border: 4px solid var(--foreground) !important;
    border-radius: 24px;
    padding: 40px 80px;
    box-shadow: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    opacity: 1;
    animation: none !important;
    z-index: 10;
    box-sizing: border-box;
}

.pusher-robot {
    position: absolute;
    left: calc(50% + 410px);
    bottom: 20px;
    margin-left: 0;
    animation: none !important;
    transform: none !important;
    z-index: 15;
}
/* ============================================================
   PUSHER ROBOT - SCROLL CONTROLLED WALKING
   ============================================================ */

/* Robot ke baqi parts static rahenge */
.pusher-robot *,
.pusher-robot .robot-walker-inner,
.pusher-robot .robot-arm,
.pusher-robot .robot-head,
.pusher-robot .robot-body {
    animation: none !important;
    animation-play-state: paused !important;
}

/* Default: legs bhi stopped */
.pusher-robot .robot-leg {
    animation: none !important;
    animation-play-state: paused !important;
    transform: rotate(0deg);
}

/* User scroll kar raha ho -> legs walk karein */
.pusher-robot.is-scrolling .pusher-leg-left {
    animation: walkStopPusher 1.7s linear infinite !important;
    animation-play-state: running !important;
}

.pusher-robot.is-scrolling .pusher-leg-right {
    animation: walkStopPusherReverse 1.7s linear infinite !important;
    animation-play-state: running !important;
}

/* ==========================================================================
   SCROLL-LINKED BLUR REVEAL FOR SISCA PC SECTION
   ========================================================================== */
#monitor-pc {
    /* Yeh default variables JS se update honge */
    --pc-opacity: 0;
    --pc-blur: 20px;
    --pc-y: 40px;
    --pc-scale: 0.95;
}

#monitor-pc .section-title,
#monitor-pc .section-subtitle {
    opacity: var(--pc-opacity);
    filter: blur(var(--pc-blur));
    transform: translateY(var(--pc-y));
    will-change: opacity, filter, transform;
}

#monitor-pc .browser-mockup {
    opacity: var(--pc-opacity);
    filter: blur(var(--pc-blur));
    transform: translateY(var(--pc-y)) scale(var(--pc-scale));
    will-change: opacity, filter, transform;
}

/* ==========================================================================
   SCROLL-LINKED BLUR REVEAL FOR INTELLIGENT SYSTEM
   ========================================================================== */
#intelligent-system {
    --pc-opacity: 0;
    --pc-blur: 20px;
    --pc-y: 40px;
}

#intelligent-system .section-title,
#intelligent-system .section-subtitle {
    opacity: var(--pc-opacity);
    filter: blur(var(--pc-blur));
    transform: translateY(var(--pc-y));
    will-change: opacity, filter, transform;
}

/* ==========================================================================
   MANAGER, PLAN & VOTE, AND PACKETS ASSEMBLY ANIMATION
   ========================================================================== */

/* 1. Shuru mein Manager aur Plan & Vote ko chupa dein */
.expert-node, 
.consensus-node {
    opacity: 0;
}

/* 2. Scroll hotay hi Manager (Top se) aur Plan & Vote (Bottom se) fly-in karega */
.swarm-animation-container.content-active .expert-node {
    animation: flyInNodeTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

.swarm-animation-container.content-active .consensus-node {
    animation: flyInNodeBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* ============================================================
   PACKETS — ALWAYS RESET UNTIL SYSTEM IS FULLY ASSEMBLED
   ============================================================ */

.swarm-animation-container .packet {
    animation-play-state: paused !important;
    opacity: 0 !important;
}

/* Packets only run after all agents finish assembling */
.swarm-animation-container.packets-active .packet {
    animation-play-state: running !important;
    opacity: 1 !important;
}

/* --- Fly-In Keyframes --- */
@keyframes flyInNodeTop {
    0% { opacity: 0; transform: translate(-50%, -120px) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes flyInNodeBottom {
    0% { opacity: 0; transform: translate(-50%, 120px) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
   PACKET-TRIGGERED GLOW STATES
   ============================================================ */


.expert-icon.packet-glow {
    border-color: #FFBD2E;
    background: var(--primary);
    color: var(--white);
    box-shadow:
        0 0 20px #FFBD2E,
        0 0 40px rgba(255, 189, 46, 0.45);
    transform: scale(1.06);
}


/* ============================================================
   PLAN & VOTE — HARD RESET
   Icon inactive rahega jab tak packet-glow class na ho.
   ============================================================ */
.consensus-icon,
.consensus-icon:not(.packet-glow) {
    animation: none !important;
    animation-name: none !important;
    animation-play-state: paused !important;

    box-shadow: none !important;
    filter: none !important;
    transform: translateZ(0) scale(1) !important;

    background: var(--surface-glass) !important;
    border: 2px dashed var(--primary) !important;
    color: var(--primary) !important;
}

.consensus-icon.packet-glow {
    background: rgba(30, 158, 137, 0.18) !important;
    border: 2px dashed var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: 0 0 15px var(--primary), 0 0 30px rgba(30, 158, 137, 0.45) !important;
    transform: scale(1.08) !important;
    animation: consensusPacketReceive 450ms ease-out !important;
    animation-play-state: running !important;
}

@keyframes consensusPacketReceive {
    0% {
        transform: translateZ(0) scale(1) !important;
        box-shadow: 0 0 0 transparent !important;
    }
    35% {
        transform: translateZ(0) scale(1.08) !important;
        box-shadow:
            0 0 15px var(--primary),
            0 0 30px rgba(30, 158, 137, 0.45) !important;
    }
    100% {
        transform: translateZ(0) scale(1) !important;
        box-shadow: 0 0 0 transparent !important;
    }
}

/* ==========================================================================
   FIX: BROWSER AUTOFILL (SAVED DATA) BACKGROUND ISSUE
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* Background color aane se roknay ke liye 5000 seconds ka delay */
    transition: background-color 5000s ease-in-out 0s !important;
    
    /* Text ka color white rakhnay ke liye */
    -webkit-text-fill-color: var(--white) !important;
    
    /* Font style barqarar rakhnay ke liye */
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
}

/* Uncopyable Headings Styling */
.uncopyable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Custom Text Highlight (Light Teal Selection for general page) */
::selection {
    background: rgba(30, 158, 137, 0.35);
    color: var(--foreground);
}

::-moz-selection {
    background: rgba(30, 158, 137, 0.35);
    color: var(--foreground);
}

/* Footer ke andar select hone par text white ho jaye ga */
.bottom-merged-section ::selection,
footer ::selection {
    background: rgba(30, 158, 137, 0.5);
    color: #FFFFFF !important; /* FIX: Footer mein text select hone par white rahega */
}

.bottom-merged-section ::-moz-selection,
footer ::-moz-selection {
    background: rgba(30, 158, 137, 0.5);
    color: #FFFFFF !important;
}

/* Central Helper Logo Center Alignment & Size Adjustment */
.helpers-center-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.helpers-center-logo img,
.helpers-center-logo a img {
    width: 65px !important; /* Size ko thora bara kar diya hai (aap zaroorat ke mutabiq 60px ya 70px bhi kar sakte hain) */
    height: 65px !important;
    object-fit: contain;
    transform: translateY(4px)
}

/* --- Desktop Only: Fine-tune Hero Eyebrow Text Alignment --- */
@media (min-width: 1025px) {
    .hero-text-side .eyebrow-text {
        font-size: 0.85rem;
        display: block;
        font-family: var(--font-body);
        font-weight: 700;
        letter-spacing: 2px;
        position: relative;
        left: 11px;  /* Text ko shift kar ke neechay walay 'A' ke center mein layega */
         
    }
}

/* --- Mobile Responsiveness (Combined 768px) --- */
@media (max-width: 768px) {
    /* Mobile ke lye Process cards ki settings */
    .process-cards-wrapper {
        flex-direction: column;
    }
    .process-arrow {
        transform: rotate(90deg); /* Teer ka nishan neechy ho jayega */
        margin: 0.5rem 0;
    }
    .process-card {
        width: 100%;
        max-width: 280px;
        min-height: auto;
    }

    /* Hero & Network Container Settings */
    .hero-network-container {
        height: 380px !important; /* Increased from 300px to add vertical room */
        margin: 4.5rem auto -3rem auto !important; /* Adds top space */
    }
    .floating-box { 
        font-size: 0.75rem; 
        padding: 0.6rem 1rem; 
    }
    .hero-logo-rotating { 
        width: 200px; 
        height: 200px; 
    }

    /* Mobile ke chote logo aur uski -90% position ke hisaab se chota mask hole */
    .bg-circuit-lines {
        -webkit-mask-image: radial-gradient(circle at 50% calc(50% - 56px), transparent 80px, black 100px);
        mask-image: radial-gradient(circle at 50% calc(50% - 56px), transparent 80px, black 100px);
    }

    /* Mobile Responsiveness for Orbit */
    .helpers-icon-wrapper {
        width: 260px;
        height: 260px;
        margin: 3rem auto 1rem auto;
    }
    .helper-icon-box {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        border-radius: 15px;
    }
    .helper-icon-box img {
        width: 35px !important;
        height: 35px !important;
    }

    /* SISCA AI flow card: compact, wider mobile layout only.
       Desktop dimensions above remain unchanged. */
    .flow-card-container {
    width: 100vw;
    max-width: none;
    padding: 0 24px;
    margin: 5rem auto -3rem;
    gap: 5rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}



    .flow-card {
    width: 100%;
    max-width: none;
    padding: 1.1rem 1.25rem;
    border-radius: 24px;
}



    .flow-card-header {
        margin-bottom: 1rem;
    }

    .flow-title {
        font-size: 0.95rem;
    }

    .flow-subtitle {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .live-badge {
        gap: 4px;
        padding: 4px 8px;
        font-size: 0.6rem;
        letter-spacing: 0.7px;
    }

    .live-dot {
        width: 6px;
        height: 6px;
    }

    .flow-steps {
        gap: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .flow-step {
        gap: 0.45rem !important;
        align-items: center !important; /* This vertically centers the icon, heading, and text */
    }

    .step-check {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 0.9rem !important;
        margin-top: 0 !important; /* Removed the extra 1px margin pushing the icon down */
    }

    .step-check::before {
        border-width: 2px;
    }

    .step-check i {
        font-size: 1.1rem;
        transform: translate(3px, 1px);
    }

    .step-title {
        flex: 0 0 78px;
        width: 78px;
        font-size: 0.58rem;
        letter-spacing: 0.7px;
        line-height: 1.2;
    }

    .step-text {
        min-width: 0;
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .flow-footer {
        gap: 0.65rem;
    }

    .progress-text {
        font-size: 0.7rem;
    }

    .progress-bar-container {
        height: 5px;
    }
    /* 1. Target ID to overcome specificity, matching Flow Card's padding footprint */
    #monitor-pc .browser-mockup {
        width: 100% !important; 
        max-width: calc(100vw - 48px) !important; 
        margin: 0 auto !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
    }

    /* 2. Absolute center the URL within the header */
    #monitor-pc .browser-header {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 16px !important;
        min-height: 48px !important;
    }

    /* 3. Lock the 3 dots strictly to the left edge */
    #monitor-pc .browser-dots {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        width: auto !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    #monitor-pc .browser-dots .dot {
        width: 9px !important;
        height: 9px !important;
    }

    /* 4. Completely eliminate the right-side spacer */
    #monitor-pc .browser-spacer {
        display: none !important;
    }

    
    #monitor-pc .browser-url {
        min-width: 0 !important;
        width: max-content !important;
        max-width: 80% !important; /* Expanded max-width so the larger text doesn't wrap */
        font-size: 1.2rem !important; /* Increased text size from 0.95rem */
        padding: 4px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important; /* Slightly increased gap to match the larger proportions */
        margin: 0 !important;
    }

    #monitor-pc .browser-url a {
        display: flex !important;
        align-items: center !important;
    }

    #monitor-pc .url-logo {
        width: 34px !important; /* Increased logo size from 20px to match text */
        height: 34px !important;
    }

    /* 6. FIX CONTENT CLIPPING: Scale down the desktop -65px margin */
    #monitor-pc .sisca-pc-video {
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
        margin-top: -24px !important; /* Increased negative margin to hide the baked-in UI */
        height: auto !important;
        width: 100% !important;
    }
    /* 1. Ensure the main container doesn't overflow */
    .swarm-animation-container {
        width: 100% !important;
        max-width: 360px !important;
        margin: 3rem auto 0 auto !important;
    }
    .swarm-animation-container {
        --manager-y: 25% !important; /* Was 5% — packets now follow this automatically */
    }
    /* 2. Scale Agents inward proportionally on BOTH X (left) and Y (top) axes */
    .agent-1 { left: 22% !important; top: 40% !important; } /* Brought down from 35% */
    .agent-2 { left: 78% !important; top: 40% !important; }
    
    .agent-3 { left: 14% !important; top: 60% !important; } /* Center row stays at 60% */
    .agent-4 { left: 86% !important; top: 60% !important; }
    
    .agent-5 { left: 30% !important; top: 80% !important; } /* Brought up from 85% */
    .agent-6 { left: 70% !important; top: 80% !important; }

    /* 3. Sync all glowing Data Packets to follow the new X and Y coordinates */
    .v-1 { --start-x: 22% !important; --start-y: 40% !important; }
    .t-1 { --end-x: 22% !important;   --end-y: 40% !important; }
    
    .v-2 { --start-x: 78% !important; --start-y: 40% !important; }
    .t-2 { --end-x: 78% !important;   --end-y: 40% !important; }
    
    .v-3 { --start-x: 14% !important; --start-y: 60% !important; }
    
    .v-4 { --start-x: 86% !important; --start-y: 60% !important; }
    .t-4 { --end-x: 86% !important;   --end-y: 60% !important; }
    
    .v-5 { --start-x: 30% !important; --start-y: 80% !important; }
    
    .v-6 { --start-x: 70% !important; --start-y: 80% !important; }


    /* 1. Reduce header height and padding for mobile view */
    .navbar {
        padding: 8px 16px !important;
        min-height: 55px !important;
        justify-content: space-between !important;
    }

    /* 2. Keep logo and text side-by-side, left-aligned, and appropriately sized */
    .navbar .logo {
        font-size: 1.15rem !important;
        gap: 5px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar .logo a {
        gap: 5px !important; 
    }

    /* Scale down the navbar brand icon/image so it doesn't break layout */
    .navbar .logo img, 
    .navbar .brand-icon {
        width: 35px !important;
        height: 35px !important;
    }

    /* 3. Keep the download button right-aligned with compact mobile padding */
    .navbar .nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .navbar .btn-primary {
        padding: 0.4rem 1rem !important;
        font-size: 0.85rem !important;
    }


    .robot-animation-container {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-top: 24rem !important; /* Increased top margin to push the section down */
    min-height: 200px !important;
    padding: 2rem 0 3rem 0 !important; /* Increased top padding, drastically decreased bottom padding */
    justify-content: center !important;
    overflow: hidden !important;
}

    .pusher-group {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    .push-board {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding: 18px 24px !important; /* Padding barha di taaky box lamba aur chaura lagay */
        border-width: 3px !important;
        border-radius: 14px !important;
        white-space: normal !important;
        text-align: center !important;
        max-width: 75vw !important; /* 60vw se barha kar 75vw kar diya taaky screen par ziada jagah le */
        flex-shrink: 1 !important;
    }

    .push-board .section-title {
        font-size: 1.15rem !important; /* Text size 0.95rem se barha kar 1.15rem kar diya */
        margin-bottom: 0.35rem !important;
        line-height: 1.25 !important;
    }

    .push-board > span {
        font-size: 1.1rem !important; /* Size kafi barha kar heading ke qareeb kar diya hai */
        letter-spacing: 1.5px !important; 
        margin: 8px 0 !important; 
        font-weight: 700 !important; /* Mazeed bold kar diya taaky wazeh nazar aaye */
    }

    .pusher-robot.robot-character {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        
        /* Fixes the sizing bug so mobile dimensions apply correctly */
        width: 32px !important;
        height: 62px !important;
        
        /* Visually shifts the robot down exactly to the board's bottom edge */
        transform: translateY(55px) !important; 
    }

    .pusher-robot .robot-head { 
        font-size: 1.5rem !important; 
        top: 6px !important; /* Pushes the smaller head down to connect with the body */
    }
    .pusher-robot .robot-body { width: 20px !important; height: 20px !important; top: 27px !important; }
    .pusher-robot .robot-chest-screen { width: 11px !important; height: 5px !important; }
    .pusher-robot .robot-arm,
    .pusher-robot.at-center .robot-arm { 
        width: 5px !important; 
        height: 17px !important; 
        top: 28px !important; /* Forces arms to stay at shoulder-level on mobile */
    }
    .pusher-robot .robot-leg { width: 6px !important; height: 20px !important; top: 40px !important; }
    .pusher-robot .left-arm { left: 8px !important; }
    .pusher-robot .left-leg { left: 9px !important; }
    .pusher-robot .right-arm { left: 15px !important; }
    .pusher-robot .right-leg { left: 17px !important; }

    /* Fix Footer Stacking for Mobile */
    .footer-content {
        flex-direction: column !important;
        gap: 1.2rem !important;
        justify-content: center !important;
    }

    .footer-content .disclaimer {
        text-align: center !important; /* Overrides the inline right-alignment */
        margin: 0 !important; /* Removes the side margins causing the text to squish */
    }

    /* Slow down the step-by-step glow sequence for mobile only */
    .process-cards-wrapper [class*="auto-glow-"],
    .process-cards-wrapper [class*="auto-glow-"] .process-icon-box,
    .process-cards-wrapper [class*="auto-arrow-"] {
        animation-duration: 9s !important; /* 6s se barha kar 9s kar diya gaya hai */
    }

    /* Reduce top spacing for Monitor PC section on mobile */
    #monitor-pc {
        margin-top: 6rem !important; /* 10rem se kam kar ke 3rem kar diya */
    }
    /* Fix CTA heading to perfectly fit in 2 lines on mobile */
    /* Fix CTA heading size and color for mobile view only */
    #join-footer .section-title {
        font-size: 1.3rem !important;                     /* Size ko thora aur compact kar diya */
        color: #4ae6ce !important;
        text-transform: none !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    /* Mobile par forced line break ko khatam karne ke liye */
    #join-footer .section-title br {
        display: none !important;
    }

    /* --- Covis-style left-aligned CTA layout (mobile only) --- */
    /* Order: logo + brand name -> heading -> text, all left aligned */
    #join-footer section.text-center {
        text-align: left !important;
        padding: 3rem 1.5rem 2rem 1.5rem !important;
    }

    #join-footer .cta-brand-row {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 1.25rem !important;
    }

    #join-footer .cta-brand-row .brand-icon {
        width: 52px !important;
        height: 52px !important;
    }

    #join-footer .cta-brand-row h3 {
        font-size: 1.8rem !important;
    }

    #join-footer section.text-center > p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    #join-footer .newsletter-form {
        justify-content: flex-start !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
}