@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
        :root {
            --primary-blue: #00274F;
            --primary-purple: #7f52a7;
            --light-purple: #f0ebf8;
            --success-green: #10b981;
            --light-green: #ecfdf5;
            --text-grey: #a1a1aa;
            --bg-color: #fafafa;
            --light-blue: #e0f2fe;
            --dark-blue: #0284c7;
            --light-yellow: #fef08a;
            --dark-yellow: #a16207;
            --border-grey: #e4e4e7;
            --white: #fff;
            --avatar-purple-start: #d8b4fe;
            --avatar-purple-end: #a855f7;
            --avatar-blue-start: #93c5fd;
            --avatar-blue-end: #3b82f6;
            --glass-bg: #fffd;
            --glass-border-light: #fff;
            --glass-border-medium: #fffc;
            --glass-border-dark: #f4f4f566;
            --glass-glow: #fff3;
            --shadow-ambient: #00000014;
            --shadow-deep: #00000008;
            --shadow-hover-ambient: #0000001f;
            --shadow-hover-deep: #0000000d;
            --shadow-green: #10b9811a;
            --shadow-blue: #13234926;
            --font-family: 'Roboto Flex', sans-serif;
        }

        .text-primary-blue { 
            color: var(--primary-blue) !important; 
        }

        .bg-primary-blue { 
            background-color: var(--primary-blue) !important; 
        }

        .text-primary-purple { 
            color: var(--primary-purple) !important; 
        }

        .bg-light-purple { 
            background-color: var(--light-purple) !important; 
        }

        .text-success-green { 
            color: var(--success-green) !important; 
        }

        .bg-light-green { 
            background-color: var(--light-green) !important; 
        }

        .text-grey { 
            color: var(--text-grey) !important; 
        }

        .bg-blue-light { 
            background-color: var(--light-blue) !important; 
        }

        .text-blue-dark { 
            color: var(--dark-blue) !important; 
        }

        .bg-yellow-light { 
            background-color: var(--light-yellow) !important; 
        }

        .text-yellow-dark { 
            color: var(--dark-yellow) !important; 
        }

        .text-14 { 
            font-size: 14px; 
        }

        .platform-public-nav-actions {
            gap: 0.75rem;
        }

        .platform-public-nav-action {
            align-items: center;
            background: var(--btn-outline-primary-bg, var(--primary-blue)) !important;
            border: 1px solid transparent !important;
            border-radius: 0.5rem;
            color: #fff !important;
            display: inline-flex;
            font-weight: 600;
            gap: 0.4rem;
            padding: 0.5rem 1rem;
            text-decoration: none;
        }

        .platform-public-nav-action:hover,
        .platform-public-nav-action:focus,
        .platform-public-nav-action:active {
            background: var(--btn-outline-primary-hover-bg, var(--primary-purple)) !important;
            border-color: transparent !important;
            color: #fff !important;
        }

        .text-13 { 
            font-size: 13px; 
            color: #4A4A4A;
        }

        .text-12 { 
            font-size: 12px; 
        }

        .text-11 { 
            font-size: 11px; 
        }

        .text-10 { 
            font-size: 10px; 
        }

        .text-9 { 
            font-size: 9px; 
        }
        
        .hero-h1 { 
            font-size: 45px; 
            line-height: 1.15; 
            letter-spacing: -0.02em;
            text-shadow: 0 4px 12px var(--shadow-hover-deep);
        }

        .max-w-1200 { 
            max-width: 1200px; 
        }

        .max-w-800 { 
            max-width: 800px; 
        }

        .max-w-98 { 
            max-width: 98%; 
        }
        
        .icon-box-28 { 
            width: 28px; 
            height: 28px; 
        }

        .icon-box-20 { 
            width: 20px; 
            height: 20px; 
        }

        .logo-box-28 { 
            width: 28px; 
            height: 28px; 
        }

        .logo-box-60 { 
            width: 60px; 
            height: 60px; 
        }
        
        .roi-chart-container { 
            height: 120px; 
            border-bottom: 1px dashed var(--border-grey); 
        }

        .dashed-bottom { 
            border-bottom-style: dashed !important; 
        }
        
        .card-3d {
            background: var(--glass-bg);
            backdrop-filter: blur(16px);
            border-top: 1px solid var(--glass-border-light) !important;
            border-left: 1px solid var(--glass-border-light) !important;
            border-right: 1px solid var(--glass-border-dark) !important;
            border-bottom: 1px solid var(--glass-border-dark) !important;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-color);
            color: var(--primary-blue);
            overflow-x: hidden;
        }

        .candidate-avatar {
            width: 32px; 
            height: 32px;
            background: linear-gradient(135deg, var(--avatar-purple-start), var(--avatar-purple-end));
        }

        .candidate-avatar.blue { 
            background: linear-gradient(135deg, var(--avatar-blue-start), var(--avatar-blue-end)); 
        }
        
        .hero-window {
            background-image: radial-gradient(var(--border-grey) 1.5px, transparent 1.5px);
            background-size: 36px 36px; 
            border-radius: 24px; 
            pointer-events: auto;
            min-height: 85vh;
            margin-bottom: 2rem !important;
        }
        
        .hero-center { 
            z-index: 50; 
            pointer-events: none; 
            padding: 0 15px;
        }

        .hero-center * { 
            pointer-events: auto; 
        }

        .floating-card { 
            z-index: 5;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            opacity: 0;
        }
        
        .floating-card:hover {
            z-index: 20;
            box-shadow: 
                0 40px 80px var(--shadow-hover-ambient), 
                0 15px 25px var(--shadow-hover-deep),
                inset 0 1px 0 var(--glass-border-light) !important;
        }

        .card-top-left { 
            top: 10%; 
            left: max(5%, calc(50% - 700px)); 
            width: 270px; 
            transform: rotate(-8deg); 
            animation: fade-in-top-left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, float-top-left 3.5s ease-in-out infinite 1.35s;
        }

        .card-top-left:hover { 
            transform: rotate(-8deg) translateY(-12px) scale(1.04) !important; 
            animation-play-state: paused !important;
        }
        
        .card-top-right { 
            top: 10%; 
            right: max(5%, calc(50% - 720px)); 
            width: 280px; 
            transform: rotate(10deg); 
            animation: fade-in-top-right 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, float-top-right 4s ease-in-out infinite 1.5s;
        }

        .card-top-right:hover { 
            transform: rotate(10deg) translateY(-12px) scale(1.04) !important; 
            animation-play-state: paused !important;
        }

        .card-bottom-left { 
            bottom: 10%; 
            left: max(5%, calc(50% - 740px)); 
            width: 310px; 
            transform: rotate(-6deg); 
            animation: fade-in-bottom-left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, float-bottom-left 4.5s ease-in-out infinite 1.65s;
        }
         
        .card-bottom-left:hover { 
            transform: rotate(-6deg) translateY(-12px) scale(1.04) !important; 
            animation-play-state: paused !important;
        }

        .card-bottom-right { 
            bottom: 10%; 
            right: max(5%, calc(50% - 740px)); 
            width: 310px; 
            transform: rotate(6deg); 
            animation: fade-in-bottom-right 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both, float-bottom-right 3s ease-in-out infinite 1.8s;
        }

        .card-bottom-right:hover { 
            transform: rotate(6deg) translateY(-12px) scale(1.04) !important; 
            animation-play-state: paused !important;
        }

        @keyframes fade-in-top-left {
            from {
                opacity: 0;
                transform: translate(-60px, -60px) rotate(-16deg) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translate(0, 0) rotate(-8deg) scale(1);
            }
        }

        @keyframes fade-in-top-right {
            from {
                opacity: 0;
                transform: translate(60px, -60px) rotate(20deg) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translate(0, 0) rotate(10deg) scale(1);
            }
        }

        @keyframes fade-in-bottom-left {
            from {
                opacity: 0;
                transform: translate(-60px, 60px) rotate(-12deg) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translate(0, 0) rotate(-6deg) scale(1);
            }
        }

        @keyframes fade-in-bottom-right {
            from {
                opacity: 0;
                transform: translate(60px, 60px) rotate(12deg) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translate(0, 0) rotate(6deg) scale(1);
            }
        }

        /* Subtle Floating/Bobbing animations when static */
        @keyframes float-top-left {
            0%, 100% {
                transform: translate(0, 0) rotate(-8deg) scale(1);
            }
            50% {
                transform: translate(-2px, -6px) rotate(-7.5deg) scale(1);
            }
        }

        @keyframes float-top-right {
            0%, 100% {
                transform: translate(0, 0) rotate(10deg) scale(1);
            }
            50% {
                transform: translate(2px, -6px) rotate(9.5deg) scale(1);
            }
        }

        @keyframes float-bottom-left {
            0%, 100% {
                transform: translate(0, 0) rotate(-6deg) scale(1);
            }
            50% {
                transform: translate(-2px, -6px) rotate(-6.5deg) scale(1);
            }
        }

        @keyframes float-bottom-right {
            0%, 100% {
                transform: translate(0, 0) rotate(6deg) scale(1);
            }
            50% {
                transform: translate(2px, -6px) rotate(5.5deg) scale(1);
            }
        }

        .roi-bar { 
            width: 14px;
            margin: 0 auto; 
            height: 90px; 
            border-radius: 4px 4px 0 0; 
            align-items: flex-end; 
        }

        .roi-bar-fill {
            width: 100%; 
            height: 10%; 
            background: var(--success-green);
            border-radius: 4px 4px 0 0; 
            transition: height 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .card-bottom-left:hover .bar-1 .roi-bar-fill { height: 25%; }
        .card-bottom-left:hover .bar-2 .roi-bar-fill { height: 40%; }
        .card-bottom-left:hover .bar-3 .roi-bar-fill { height: 55%; }
        .card-bottom-left:hover .bar-4 .roi-bar-fill { height: 70%; }
        .card-bottom-left:hover .bar-5 .roi-bar-fill { height: 85%; }
        .card-bottom-left:hover .bar-6 .roi-bar-fill { height: 95%; }
        
        .roi-value { 
            opacity: 0; 
            transition: opacity 0.5s ease 0.2s; 
            top: -18px; 
        }

        .card-bottom-left:hover .roi-value { 
            opacity: 1; 
        }

        .candidate-item { 
            cursor: pointer; 
            transition: all 0.3s ease; 
        }

        .candidate-item:hover { 
            border-color: var(--success-green) !important; 
            background-color: var(--light-green) !important; 
            transform: translateY(-2px);
            box-shadow: 0 8px 16px var(--shadow-green);
        }

        .candidate-item:hover .candidate-match { 
            background-color: var(--success-green) !important; 
            color: var(--white) !important; 
        }
        
        .subject-card { 
            cursor: pointer; 
            transition: all 0.3s ease; 
        }

        .subject-card.active, .subject-card:not(.active):hover {
            border-color: var(--primary-blue) !important; 
            background-color: var(--primary-blue) !important; 
            color: var(--white) !important;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px var(--shadow-blue) !important;
        }

        .subject-card.active .sc-icon, .subject-card:not(.active):hover .sc-icon { 
            background: var(--glass-glow) !important; 
            color: var(--white) !important; 
        }

        .subject-card .icon-check { 
            display: none; 
        }

        .subject-card .icon-plus { 
            display: block; 
        }

        .subject-card.active .icon-check, .subject-card:not(.active):hover .icon-check { 
            display: block; 
        }

        .subject-card.active .icon-plus, .subject-card:not(.active):hover .icon-plus { 
            display: none; 
        }

        .features {
            width: 100%;
            max-width: 100%;
            margin-bottom: 4rem;
            padding: 4rem 1.5rem;
        }

        .feature-card {
            background: var(--white);
            border: 1px solid var(--border-grey) !important;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px var(--shadow-ambient) !important;
            border-color: var(--primary-purple) !important;
        }

        .feature-image-wrapper {
            position: relative;
            background-color: var(--bg-color);
            height: 180px;
        }

        .hover-scale {
            transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .feature-card:hover .hover-scale {
            transform: scale(1.06);
        }

        .text-success{ 
            color: #7f52a7 !important; 
        }

        .text-primary{ 
            color: #132349 !important; 
        }

        .dashboard-card{
           bottom: -80px !important;
        }

        .avatar-group img + img {
            margin-left: -14px;
        }

        .cta-glass {
            background: #fffd;
            backdrop-filter: blur(12px);
            transition: all 0.3s ease;
            max-width: 420px;
            z-index: 1;
        }
        
        .cta-glass:hover {
            transform: translateY(-50%) scale(1.02) !important;
            background: #fffffff2;
        }

        .avatar-images {
            margin-left : 50px;
            bottom: 0 !important;
        }

        /* CORRECT: Mix double and single quotes */
        .abstract-section-bg {
            min-height: 480px;
            max-width: 1200px;
            margin: 0 auto;
            background: #dbe4ff url('../css/images/platform_image/purple-abstract.jpg') center/cover !important;
        }

        .avatar-text { 
            font-size: 0.9rem; 
        }

        .cta-heading { 
            letter-spacing: -1px; 
        }

        .cta-text { 
            font-size: 0.85rem; 
            line-height: 1.6; 
        }

        .site-footer { 
            background-color: #c4c4c4; 
        }

        .footer-desc { 
            font-size: 0.8rem; 
            line-height: 1.6; 
        }

        .footer-link { 
            font-size: 0.7rem; 
            letter-spacing: 1px; 
        }

        .footer-copyright { 
            font-size: 0.7rem; 
        }

        @media (width < 991px) {
            .floating-card {
                display: none !important;
            }

            .hero-h1 {
                font-size: 36px;
            }

            .dashboard-card {
                bottom: -50px !important;
            }
        }

        @media (width < 768px) {
            .features {
                padding: 2rem 1rem;
            }
            
            .dashboard-card {
                bottom: -60px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                width: 90% !important;
            }

            .pathways-col {
                margin-bottom: 5rem !important;
            }

            .abstract-section-bg {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: auto;
                padding: 40px 20px 100px;
            }

            .cta-glass {
                position: relative !important;
                top: auto !important;
                transform: none !important;
                margin: 0 auto !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .cta-glass:hover { 
                transform: scale(1.02) !important; 
            }

            .avatar-images {
                margin-left: 0 !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                width: max-content;
                max-width: 90%;
                justify-content: center;
                bottom: 100px !important;
            }
        }

        @media (width < 576px) {
            .hero-h1 {
                font-size: 28px;
            }

            .dashboard-card {
                padding: 1.5rem !important;
                width: 95% !important;
            }

            .pathways-col {
                margin-bottom: 4rem !important; 
            }
        }

        .tablet-mockup{
            max-width: 850px; 
            border-radius: 1.5rem 1.5rem 0 0; 
            padding: 1rem 1rem 0;
            z-index: 2; 
            margin-bottom: -2rem;
        }

        .tablet-screen{
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .screen{
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .bottom-gradient{
            height: 35%; 
            background: linear-gradient(to bottom, #f8f9fa00 0%, #f8f9fa 100%); 
            z-index: 3;
        }