/* CSS Variables */
 :root {
     --main-color: #4653CF;
     --main-color-hover: #606de2;
     --highlight-color: #FFDE7C;
     --text-color: #3f3e3e;
     --yellow: #fbc932;
     --light-grey: #ECEFF3;
     --font-family: 'Inter', sans-serif;
     --text-white: #ffffff;

     --purple: #4653CF;
     --blue: #8d96ee;
     --green: #22c55e;

     --purple-light: #818cf8;
     --blue-light: #60a5fa;
     --cyan: #06b6d4;
     --teal: #14b8a6;
 }

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

 body {
     font-family: var(--font-family);
     color: var(--text-color);
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
 }

 .main-title {
     text-align: center;
     font-size: 3rem;
     font-weight: 700;
     color: var(--text-color);
     padding: 3rem 0 4rem;
 }

 /* Section Layout - Fixed to keep exact layout */
 .section {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 6rem;
     align-items: center;
     margin-bottom: 6rem;
     min-height: 500px;
 }

 .section-1 .content-left {
     order: 1;
 }

 .section-1 .content-right {
     order: 2;
 }

 .section-2 .content-left {
     order: 2;
 }

 .section-2 .content-right {
     order: 1;
 }

 .section-3 .content-left {
     order: 1;
 }

 .section-3 .content-right {
     order: 2;
 }

 .content-right {
     width: 100%;
 }

 .number-label {
     font-size: 5rem;
     font-weight: 700;
     color: var(--main-color);
     line-height: 1;
     margin-bottom: 0.5rem;
 }

 .section-title {
     font-size: 2rem;
     font-weight: 700;
     color: var(--text-color);
     margin-bottom: 1.5rem;
 }

 .section-description {
     font-size: 1rem;
     color: #6b7280;
     line-height: 1.8;
     max-width: 500px;
 }

 /* Section 1 - Personality Card */
 .personality-card {
     background: var(--text-white);
     border-radius: 1.5rem;
     padding: 1.5rem;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     width: 100%;
     max-width: 360px;
     border: 1px solid #EDEFFF;
 }

 .card-header {
     font-size: 1.125rem;
     font-weight: 600;
     text-align: center;
     color: var(--text-color);
     margin-bottom: 1rem;
 }

 .options-list {
     margin-bottom: 1rem;
 }

 .option-item {
     display: flex;
     align-items: center;
     padding: 0.75rem;
     margin-bottom: 0;
     border-radius: 0.5rem;
     background: transparent;
 }

 .option-item.checked {
     background: #f2f3ff;
 }

 .option-check {
     width: 20px;
     height: 20px;
     margin-right: 1rem;
     border-radius: 50%;
     background: var(--text-white);
     border: 2px solid #d1d5db;
     flex-shrink: 0;
 }

 .option-item.checked .option-check {
     background: var(--main-color);
     border-color: var(--main-color);
     position: relative;
 }

 .option-item.checked .option-check::after {
     content: '';
     position: absolute;
     left: 5px;
     top: 2px;
     width: 6px;
     height: 10px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .option-text {
     font-size: 0.95rem;
     color: var(--text-color);
 }

 .emoji-wrapper {
     transform: scale(0.7);
     /* Try 0.6–0.75 */
     transform-origin: center;
     display: inline-flex;
 }

 .emoji-card {
     position: absolute;
     top: 150px;
     left: 230px;
     z-index: 2;
     background: var(--text-white);
     border-radius: 1.5rem;
     padding: 0;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     border: 1px solid #EDEFFF;
 }


 .emoji-slider {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     padding: 0 0 3rem;
     gap: 0.5rem;
 }

 .emoji {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 .emoji.sad {
     background: linear-gradient(135deg, #f5a6a6 0%, #ef8d8d 100%);
 }

 .emoji.neutral-sad {
     background: linear-gradient(135deg, #fbc932 0%, #ffaa66 100%);
 }

 .emoji.neutral {
     background: linear-gradient(135deg, #a5b4fc 0%, #8b9aed 100%);
 }

 .emoji.neutral-happy {
     background: linear-gradient(135deg, #a8d8f0 0%, #8ec5de 100%);
 }

 .emoji.happy {
     background: linear-gradient(135deg, #a8e6a8 0%, #81d981 100%);
 }

 /* Emoji facial features */
 .emoji::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 /* Eyes */
 .emoji-eyes {
     display: flex;
     gap: 12px;
     margin-bottom: 8px;
 }

 .emoji-eye {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.4);
 }

 .emoji.sad .emoji-eye {
     transform: rotate(-10deg);
 }

 /* Mouths */
 .emoji-mouth {
     width: 12px;
     height: 8px;
     border: 2.5px solid rgba(0, 0, 0, 0.3);
     border-radius: 0 0 24px 24px;
     border-top: none;
 }

 .emoji.sad .emoji-mouth {
     border-radius: 24px 24px 0 0;
     border-bottom: none;
     border-top: 2.5px solid rgba(0, 0, 0, 0.3);
     margin-top: -4px;
 }

 .emoji.neutral-sad .emoji-mouth {
     border-radius: 24px 24px 0 0;
     border-bottom: none;
     border-top: 2.5px solid rgba(0, 0, 0, 0.3);
     width: 20px;
     height: 8px;
     margin-top: -2px;
 }

 .emoji.neutral .emoji-mouth {
     width: 20px;
     height: 3px;
     background: rgba(0, 0, 0, 0.3);
     border: none;
     border-radius: 2px;
 }

 .emoji.neutral-happy .emoji-mouth {
     width: 12px;
     height: 6px;
 }

 .emoji.happy .emoji-mouth {
     width: 26px;
     height: 13px;
     border-color: rgba(255, 255, 255, 0.8);
     background: rgba(255, 255, 255, 0.8);
     border-width: 2px;
 }

 .slider-track {
     width: 100%;
     position: absolute;
     bottom: 0.75rem;
     left: 0;
     right: 8%;
     height: 12px;
     background: #e5e7eb;
     border-radius: 999px;
     z-index: 1;
     overflow: visible;
 }

 .slider-progress {
     height: 100%;
     width: 80%;
     background: linear-gradient(90deg, #ef8d8d 10%, #fcc23d 20%, #a5b4fc 30%, #8ec5de 60%, #81d981 100%);
     border-radius: 999px;
     position: relative;
 }

 .slider-thumb {
     position: absolute;
     right: -16px;
     top: 50%;
     transform: translateY(-50%);
     width: 30px;
     height: 30px;
     background: white;
     border-radius: 50%;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     z-index: 3;
 }

 .slider-thumb::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: 20px;
     background: linear-gradient(135deg, #a5b4fc 0%, #4653cf 100%);
     border-radius: 50%;
 }

 .button-group {
     display: flex;
     gap: 1rem;
 }

 .btn-back,
 .btn-next {
     flex: 1;
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     font-size: 0.95rem;
     font-weight: 600;
     border: none;
     text-align: center;
 }

 .btn-back {
     background: var(--text-white);
     color: var(--text-color);
     border: 1px solid #e5e7eb;
 }

 .btn-next {
     background: var(--main-color);
     color: var(--text-white);
 }

 /* Section 2 - Pentagon Chart */
 .pentagon-card {
     background: var(--text-white);
     border-radius: 1.5rem;
     padding: 1.5rem;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     width: 100%;
     max-width: 360px;
     display: flex;
     flex-direction: column;
     align-items: center;
     border: 1px solid #EDEFFF;
 }

 .pentagon-chart {
     width: 80%;
     height: auto;
     margin-bottom: 0rem;
     overflow: unset;
 }

 .pentagon-outline {
     fill: none;
     stroke: #e5e7eb;
     stroke-width: 1;
 }

 .pentagon-fill {
     fill: rgb(237 238 249);
     stroke: var(--main-color);
     stroke-width: 2.5;
 }

 .pentagon-dot {
     fill: var(--main-color);
     stroke: white;
     stroke-width: 2;
 }

 .grid-line {
     fill: none;
     stroke: #e0e3ff;
     stroke-width: 1;
 }

 .chart-label {
     font-size: 12px;
     fill: var(--text-color);
     text-anchor: middle;
     font-weight: 500;
 }

 .analysis-footer {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     justify-content: center;
     margin-top: 1rem;
 }

 .footer {
     padding-top: 2rem !important;
 }

 .footer-text {
     font-size: 14px;
     color: var(--text-color);
     line-height: 1.5;
     text-wrap: auto;
 }

 .highlight {
     color: var(--main-color);
     font-weight: 600;
 }

 /* Section 3 - Assessment Cards */
 .cards-container {
     position: relative;
     height: 560px;
     width: 100%;
 }

 .assessment-card {
     background: var(--text-white);
     border-radius: 1.5rem;
     padding: 1.5rem;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     position: absolute;
     border: 1px solid #EDEFFF;
 }

 .main-card {
     width: 360px;
     top: 0;
     left: 0;
     z-index: 1;
 }

 .insights-card {
     width: 320px;
     top: 120px;
     left: 190px;
     z-index: 2;
 }

 .card-header {
     padding-top: 0;
     background-color: transparent;
 }

 .card-header-small {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--text-color);
 }

 .avatar {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--main-color-hover) 0%, var(--main-color) 100%);
     border: 2px solid #d7dbff;
 }

 .avatar i {
     color: white;
     font-size: 18px;
 }

 .mockup-avatar i {
     color: white;
     font-size: 20px;
 }

 .growth-badges {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
 }

 .badge {
     padding: 0.35rem 0.75rem;
     border-radius: 0.375rem;
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--text-white);
 }

 .badge-blue {
     background: var(--blue);
 }

 .badge-cyan {
     background: #78c0e2;
 }

 .bar-chart {
     display: flex;
     align-items: flex-end;
     gap: 0.5rem;
     height: 100px;
     margin-bottom: 1.5rem;
     position: relative;
 }

 .chart-bar {
     flex: 1;
     border-radius: 0.375rem 0.375rem 0 0;
 }

 .bar-purple {
     height: 45%;
     background: linear-gradient(180deg, #c5caff 0%, #8d96ee 100%);
 }

 .bar-blue {
     height: 55%;
     background: linear-gradient(180deg, #8d96ee 0%, #4653cf 100%);
 }

 .bar-cyan {
     height: 70%;
     background: linear-gradient(180deg, #ffe9a5 0%, #fbc932 100%)
 }

 .bar-teal {
     height: 80%;
     background: linear-gradient(180deg, #5eead4 0%, var(--teal) 100%);
 }

 .bar-green {
     height: 95%;
     background: linear-gradient(180deg, #86efac 0%, var(--green) 100%);
 }

 .progress-bars {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }

 .progress-bar-wrapper {
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .progress-icon {
     width: 14px;
     height: 14px;
     border-radius: 3px;
     flex-shrink: 0;
 }

 .progress-icon.purple {
     background: linear-gradient(180deg, #c5caff 0%, #8d96ee 100%);
 }

 .progress-icon.cyan {
     background: linear-gradient(180deg, #8d96ee 0%, #4653cf 100%);
 }

 .progress-icon.green {
     background: linear-gradient(180deg, #ffe9a5 0%, #fbc932 100%);
 }

 .progress-bar {
     height: 8px;
     background: #f3f4f6;
     border-radius: 999px;
     overflow: hidden;
     flex: 1;
 }

 .progress-fill {
     height: 100%;
     border-radius: 999px;
 }

 .fill-purple {
     width: 92%;
     background: linear-gradient(180deg, #c5caff 0%, #8d96ee 100%);
 }

 .fill-blue {
     width: 80%;
     background: linear-gradient(180deg, #8d96ee 0%, #4653cf 100%);
 }

 .fill-green {
     width: 65%;
     background: linear-gradient(180deg, #ffe9a5 0%, #fbc932 100%);
 }

 .insights-header {
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: 1.25rem;
     font-size: 0.9rem;
 }

 .circular-stats {
     display: flex;
     justify-content: space-between;
     gap: 0.5rem;
     margin-bottom: 1rem;
 }

 .stat-circle {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
 }

 .stat-circle svg {
     margin-bottom: 0.5rem;
 }

 .circle-bg {
     fill: none;
     stroke: #f3f4f6;
     stroke-width: 5;
 }

 .circle-progress {
     fill: none;
     stroke-width: 5;
     stroke-linecap: round;
     transform: rotate(-90deg);
     transform-origin: center;
 }

 .purple-progress {
     stroke: var(--main-color);
 }

 .blue-progress {
     stroke: var(--blue);
 }

 .yellow-progress {
     stroke: var(--yellow);
 }

 .stat-value {
     position: absolute;
     top: 22px;
     font-size: 0.875rem;
     font-weight: 700;
     color: var(--text-color);
 }

 .stat-label {
     font-size: 0.65rem;
     color: var(--text-color);
     text-align: center;
     opacity: 0.7;
 }

 .recommendations-section {
     border-top: 1px solid #f3f4f6;
     padding-top: 1rem;
 }

 .recommendations-header {
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: 0.875rem;
     font-size: 0.8rem;
 }

 .recommendation-item {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     margin-bottom: 0rem;
     padding: 0.75rem;
     background: #fafafa;
     border-radius: 0.5rem;
 }

 .rec-icon-wrapper {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .rec-icon-wrapper.purple {
     background: rgba(139, 92, 246, 0.15);
 }

 .rec-icon-wrapper.green {
     background: rgb(213 242 255 / 43%);
 }

 .rec-icon {
     flex-shrink: 0;
 }

 .rec-text {
     font-size: 0.75rem;
     color: var(--text-color);
     line-height: 1.5;
     opacity: 0.75;
 }

 .cta-button {
     margin-top: 2.5rem;
     padding: 0.875rem 2rem;
     background: var(--main-color);
     color: var(--text-white);
     border: none;
     border-radius: 0.5rem;
     font-size: 1rem;
     font-weight: 600;
 }

 /* Chart line overlay */
 .chart-line {
     position: absolute;
     top: 20%;
     left: 10%;
     right: 10%;
     height: 2px;
     background: linear-gradient(90deg, var(--main-color) 0%, var(--blue) 30%, var(--cyan) 60%, var(--green) 100%);
 }

 .chart-dot {
     position: absolute;
     width: 8px;
     height: 8px;
     background: var(--green);
     border-radius: 50%;
     border: 2px solid white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 @media (max-width: 768px) {
     .section {
         gap: 2rem;
     }

     .number-label {
         font-size: 4rem;
     }

     .section-title {
         font-size: 1.75rem;
     }

     .main-card {
         width: 300px;
         top: 0;
         left: 0;
     }

     .insights-card {
         width: 100%;
         left: 160px;
         bottom: 0;
         right: 0;
         height: fit-content;
     }

     .content-right {
         position: relative;
         width: 100%;
         margin-inline: auto;
     }

     .personality-card {
         transform: scale(0.65);
         transform-origin: top left;
         width: 100%;
         justify-content: center;
     }

     .emoji-card {
         transform: scale(0.65);
         transform-origin: bottom right;
         width: 100%;
         left: auto;
         right: 0;
         top: 220px;
     }

     .emoji-wrapper {
         transform: scale(0.8);
         transform-origin: center;
         display: inline-flex;
         margin: auto;
         justify-content: center;
         margin-left: 14px;
     }

     .cards-container {
         transform: scale(0.65);
         transform-origin: top left;
         min-height: 360px;
         height: auto;
     }
 }

 /* Dashboard Mockup */
 .dashboard-mockup {
     position: relative;
     height: 440px;
     width: 100%;
     margin-left: 2rem;
 }

 .mockup-card {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border-radius: 1.25rem;
     padding: 1.5rem;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.2);
     position: absolute;
 }

 .main-mockup {
     width: 340px;
     top: 0;
     left: 0;
     z-index: 1;
 }

 .secondary-mockup {
     width: 240px;
     top: 100px;
     right: 20px;
     z-index: 2;
     padding: 1.5rem;
 }

 .mockup-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }

 .mockup-avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .mockup-title {
     flex: 1;
 }

 .mockup-name {
     font-size: 1rem;
     font-weight: 600;
     color: var(--text-white);
     margin-bottom: 0.25rem;
 }

 .mockup-subtitle {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.7);
 }

 .mockup-chart {
     margin-bottom: 1.5rem;
     display: flex;
     justify-content: center;
 }

 .mini-pentagon {
     width: 100%;
     height: auto;
 }

 .mockup-stats {
     display: flex;
     justify-content: space-between;
     gap: 0.5rem;
     width: 100%;
 }

 .mockup-stat {
     flex: 1 1 0;
     min-width: 0;
     text-align: center;
     padding: 0.875rem;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 0.75rem;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .stat-number.white {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--text-white);
     margin-bottom: 0.25rem;
 }

 .stat-name {
     font-size: 0.7rem;
     color: rgba(255, 255, 255, 0.7);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .mockup-mini-header {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--text-white);
     margin-bottom: 1rem;
 }

 .mockup-recommendation {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 0.875rem;
     padding: 0.75rem;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 0.5rem;
 }

 .mockup-rec-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #fede7c;
     flex-shrink: 0;
 }

 .mockup-rec-text {
     flex: 1;
     height: 8px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
 }

 /* Responsive */
 @media (max-width: 968px) {
     .section {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .dashboard-mockup {
         height: 330px;
         margin-left: 0;
     }

     .main-mockup {
         transform: scale(0.7);
         transform-origin: top left;
         width: 100%;
         max-width: 340px;
     }

     .secondary-mockup {
         width: 100%;
         max-width: 280px;
         right: 0;
         transform: scale(0.7);
         transform-origin: top right;
     }
 }