/* TACI - Elite AI Company Design */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background: #000000;
        color: #FFFFFF;
        overflow-x: hidden;
    }

    .container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 2rem;
        background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);
    }

    /* Brand */
    .brand {
        text-align: center;
        margin-bottom: 6rem;
        opacity: 0;
        animation: fadeInUp 1.2s ease-out 0.3s forwards;
    }

    .brand h1 {
        font-size: 5rem;
        font-weight: 300;
        color: #FFFFFF;
        letter-spacing: -0.03em;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #FFFFFF 0%, #a0a0a0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .brand p {
        font-size: 1.125rem;
        font-weight: 400;
        color: #666666;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    /* Hero */
    .hero {
        width: 100%;
        max-width: 1400px;
        text-align: center;
    }

    /* Neural Visualization */
    .neural-visualization {
        position: relative;
        margin-bottom: 8rem;
        opacity: 0;
        animation: fadeInUp 1.2s ease-out 0.6s forwards;
    }

    .network {
        width: 100%;
        height: 400px;
        max-width: 800px;
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
    }

    .node {
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        transform-box: fill-box;
        transform-origin: center;
    }

    .node:hover {
        transform: scale(1.5);
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }

    .node.active {
        fill: #FFFFFF;
        transform: scale(1.8);
        filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
    }

    .connection {
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        stroke: url(#connectionGrad);
        stroke-width: 0.5;
        opacity: 0.3;
    }

    .connection.active {
        stroke: #FFFFFF;
        stroke-width: 1.5;
        opacity: 0.9;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
        animation: pulse 2s ease-in-out infinite;
    }

    /* Task Labels */
    .task-labels {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
    }

    .task-labels .label {
        position: absolute;
        text-align: right;
        right: 10px;
    }

    /* Position each input label to align with its corresponding node */
    .task-labels .label:nth-child(1) { top: 80px; transform: translateY(-50%); }  /* Research Scientist */
    .task-labels .label:nth-child(2) { top: 120px; transform: translateY(-50%); } /* Software Engineer */
    .task-labels .label:nth-child(3) { top: 160px; transform: translateY(-50%); } /* Financial Analyst */
    .task-labels .label:nth-child(4) { top: 200px; transform: translateY(-50%); } /* Physician */
    .task-labels .label:nth-child(5) { top: 240px; transform: translateY(-50%); } /* Lawyer */
    .task-labels .label:nth-child(6) { top: 280px; transform: translateY(-50%); } /* Creative Director */
    .task-labels .label:nth-child(7) { top: 320px; transform: translateY(-50%); } /* Business Strategist */

    .output-labels {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
    }

    .output-labels .label {
        position: absolute;
        text-align: left;
        left: 10px;
        top: 200px;
        transform: translateY(-50%);
    }

    .label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #666666;
        transition: all 0.4s ease;
        opacity: 0.7;
    }

    .task-labels .label.active {
        color: #FFFFFF;
        opacity: 1;
        transform: translateY(-50%) translateX(8px);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    .output-labels .label.active {
        color: #FFFFFF;
        opacity: 1;
        transform: translateY(-50%) translateX(-8px);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    /* Occupation transition animations */
    .label.transitioning {
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* Progress Display */
    .progress-display {
        position: absolute;
        bottom: -120px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .progress-circle {
        position: relative;
        width: 80px;
        height: 80px;
    }

    .progress-circle svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .progress-ring {
        transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    }

    .progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.25rem;
        font-weight: 600;
        color: #FFFFFF;
    }

    .progress-label {
        font-size: 0.875rem;
        color: #666666;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Content */
    .content {
        max-width: 700px;
        margin: 0 auto;
        opacity: 0;
        animation: fadeInUp 1.2s ease-out 0.9s forwards;
    }

    .content h2 {
        font-size: 3.5rem;
        font-weight: 300;
        color: #FFFFFF;
        margin-bottom: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .content p {
        font-size: 1.25rem;
        font-weight: 400;
        color: #999999;
        line-height: 1.7;
        letter-spacing: 0.01em;
    }

    /* CTA Section */
    .cta-section {
        max-width: 600px;
        margin: 4rem auto 0;
        text-align: center;
        opacity: 0;
        animation: fadeInUp 1.2s ease-out 1.1s forwards;
    }

    .cta-text {
        font-size: 1.125rem;
        font-weight: 400;
        color: #CCCCCC;
        margin-bottom: 1.5rem;
        line-height: 1.6;
        letter-spacing: 0.01em;
    }

    .cta-text strong {
        font-weight: 500;
        color: #FFFFFF;
    }

    .cta-link {
        display: inline-block;
        font-size: 1.125rem;
        font-weight: 500;
        color: #FFFFFF;
        text-decoration: none;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        letter-spacing: 0.02em;
    }

    .cta-link:hover {
        color: #FFFFFF;
        border-bottom-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
    }

    /* Footer */
    footer {
        margin-top: 6rem;
        width: 100%;
        text-align: center;
        opacity: 0;
        animation: fadeInUp 1.2s ease-out 1.2s forwards;
    }

    .divider {
        width: 100px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        margin: 0 auto 2rem;
    }

    footer p {
        font-size: 0.875rem;
        color: #666666;
        font-weight: 400;
        letter-spacing: 0.02em;
    }

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

    @keyframes pulse {
        0%, 100% {
            opacity: 0.9;
        }
        50% {
            opacity: 0.6;
        }
    }


    /* Responsive Design */
    @media (max-width: 1200px) {
        .neural-visualization {
            margin-bottom: 6rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }
        
        .task-labels {
            position: static;
            transform: none;
            width: 100%;
            max-width: 400px;
            margin: 0;
            text-align: center;
            order: 1;
        }
        
        .task-labels .label {
            position: static;
            transform: none !important;
            text-align: center;
            margin-bottom: 0.75rem;
            display: block;
        }
        
        .network {
            height: 350px;
            order: 2;
        }
        
        .output-labels {
            position: static;
            transform: none;
            width: 100%;
            max-width: 400px;
            margin: 0;
            text-align: center;
            order: 3;
        }
        
        .output-labels .label {
            position: static;
            transform: none !important;
            text-align: center;
            display: block;
        }
        
        .progress-display {
            position: static;
            transform: none;
            margin-top: 3rem;
            order: 4;
        }
    }

    @media (max-width: 768px) {
        .container {
            padding: 2rem 1rem;
        }
        
        .brand {
            margin-bottom: 3rem;
        }
        
        .brand h1 {
            font-size: 3rem;
        }
        
        .brand p {
            font-size: 1rem;
        }
        
        .neural-visualization {
            margin-bottom: 4rem;
        }
        
        .network {
            height: 280px;
            max-width: 100%;
        }
        
        .task-labels, .output-labels {
            max-width: 100%;
            gap: 0.5rem;
        }
        
        .label {
            font-size: 0.875rem;
            padding: 0.5rem;
        }
        
        .content {
            margin-bottom: 2rem;
        }
        
        .content h2 {
            font-size: 2.25rem;
            margin-bottom: 1.5rem;
        }
        
        .content p {
            font-size: 1rem;
            line-height: 1.6;
        }
        
        .cta-section {
            margin-top: 3rem;
        }
        
        .cta-text {
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }
        
        .cta-link {
            font-size: 0.95rem;
        }
        
        .progress-display {
            margin-top: 2rem;
        }
        
        .progress-circle {
            width: 60px;
            height: 60px;
        }
        
        .progress-text {
            font-size: 1rem;
        }
        
        .progress-label {
            font-size: 0.75rem;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 1.5rem 0.75rem;
        }
        
        .brand h1 {
            font-size: 2.5rem;
        }
        
        .brand p {
            font-size: 0.9rem;
        }
        
        .brand {
            margin-bottom: 2.5rem;
        }
        
        .neural-visualization {
            margin-bottom: 3rem;
        }
        
        .network {
            height: 220px;
        }
        
        .task-labels, .output-labels {
            margin: 1.5rem auto;
        }
        
        .label {
            font-size: 0.8rem;
            padding: 0.4rem;
        }
        
        .content h2 {
            font-size: 1.875rem;
            margin-bottom: 1rem;
        }
        
        .content p {
            font-size: 0.95rem;
        }
        
        .cta-section {
            margin-top: 2.5rem;
        }
        
        .cta-text {
            font-size: 0.9rem;
        }
        
        .cta-link {
            font-size: 0.9rem;
            padding: 0.5rem 0;
        }
        
        .progress-circle {
            width: 50px;
            height: 50px;
        }
        
        .progress-text {
            font-size: 0.875rem;
        }
        
        .progress-label {
            font-size: 0.7rem;
        }
    }

    /* Performance optimizations */
    .node, .connection {
        will-change: transform, opacity, filter;
    }

    .label {
        will-change: transform, color, opacity;
    }

    /* High contrast accessibility */
    @media (prefers-contrast: high) {
        .brand h1 {
            color: #FFFFFF;
            background: #FFFFFF;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .node {
            fill: #FFFFFF !important;
        }
        
        .connection {
            stroke: #FFFFFF !important;
        }
    }

    /* Reduced motion accessibility */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }