/* =========================================
   GLOBAL
========================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;
    background: #080b12;
    color: white;
    min-height: 100vh;
    overflow-x: hidden;
}


/* =========================================
   PAGE CONTROL
========================================= */

#authPage {
    min-height: 100vh;
}


#dashboardPage {
    display: none;
}


/* =========================================
   AUTH BACKGROUND
========================================= */

#authPage {
    position: relative;
}


#authPage::before {

    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    background: #4f46e5;

    filter: blur(180px);

    opacity: 0.25;

    top: -200px;
    left: -150px;

    z-index: -1;
}


#authPage::after {

    content: "";

    position: fixed;

    width: 450px;
    height: 450px;

    background: #9333ea;

    filter: blur(180px);

    opacity: 0.20;

    right: -150px;
    bottom: -150px;

    z-index: -1;
}


/* =========================================
   BRAND
========================================= */

.brand {

    font-size: 24px;

    font-weight: 800;

    color: white;

    text-decoration: none;
}


.brand:hover {
    color: white;
}


.brand span {
    color: #7c5cff;
}


.brand-icon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-right: 8px;

    border-radius: 12px;

    background: linear-gradient(135deg,
            #4f46e5,
            #9333ea);
}


/* =========================================
   AUTH NAVBAR
========================================= */

.auth-navbar {
    padding: 25px 6%;
}


/* =========================================
   AUTH CONTAINER
========================================= */

.auth-container {

    min-height: calc(100vh - 90px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 40px 20px;
}


.auth-card {

    width: 100%;

    max-width: 460px;

    padding: 40px;

    border-radius: 24px;

    background: rgba(15, 23, 42, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(20px);

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45);

    animation: cardAppear 0.6s ease;
}


@keyframes cardAppear {

    from {

        opacity: 0;

        transform: translateY(25px);
    }


    to {

        opacity: 1;

        transform: translateY(0);
    }
}


.auth-header {

    text-align: center;

    margin-bottom: 30px;
}


.ai-icon {

    width: 70px;
    height: 70px;

    margin: auto;

    margin-bottom: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: linear-gradient(135deg,
            #4f46e5,
            #9333ea);

    font-size: 30px;
}


.auth-header h1 {

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 8px;
}


.auth-header p {

    color: #94a3b8;

    font-size: 14px;
}

.back-home-btn {
    position: absolute;

    top: 25px;
    right: 25px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    color: white;

    font-size: 14px;

    cursor: pointer;

    transition: 0.3s;

    z-index: 100;
}

.back-home-btn:hover {
    background: rgba(124, 92, 255, 0.15);

    border-color: rgba(124, 92, 255, 0.4);

    transform: translateX(-3px);
}


/* =========================================
   FORM
========================================= */

.form-label {

    color: #cbd5e1;

    font-size: 14px;

    margin-bottom: 8px;
}


.input-group-custom {

    position: relative;

    margin-bottom: 20px;
}


.input-icon {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #64748b;

    z-index: 5;
}


.form-control-custom {

    width: 100%;

    height: 52px;

    padding: 0 45px;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.04);

    color: white;

    outline: none;
}


.form-control-custom::placeholder {
    color: #64748b;
}


.form-control-custom:focus {

    border-color: #7c5cff;

    background: rgba(124, 92, 255, 0.06);

    box-shadow:
        0 0 0 3px rgba(124, 92, 255, 0.12);
}


.password-eye {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #64748b;

    cursor: pointer;
}


.form-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    font-size: 13px;
}


.remember {
    color: #94a3b8;
}


.remember input {
    accent-color: #7c5cff;
}


.forgot {

    color: #a78bfa;

    text-decoration: none;
}


/* =========================================
   AUTH BUTTON
========================================= */

.auth-btn {

    width: 100%;

    min-height: 52px;

    border: none;

    border-radius: 12px;

    color: white;

    font-size: 15px;

    font-weight: 600;

    background: linear-gradient(135deg,
            #4f46e5,
            #9333ea);

    transition: 0.3s;
}


.auth-btn:hover {

    transform: translateY(-2px);
}


.divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 25px 0;

    color: #64748b;

    font-size: 12px;
}


.divider::before,
.divider::after {

    content: "";

    height: 1px;

    flex: 1;

    background: rgba(255, 255, 255, 0.1);
}


.google-btn {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: white;
}

.google-btn-wrapper {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.google-btn-wrapper .g_id_signin {
    width: 100%;
}



.switch-text {

    text-align: center;

    margin-top: 25px;

    color: #64748b;

    font-size: 14px;
}


.switch-btn {

    background: none;

    border: none;

    color: #a78bfa;

    font-weight: 600;

    cursor: pointer;
}


#signupForm {
    display: none;
}


/* =========================================
   DASHBOARD NAVBAR
========================================= */

.main-navbar {

    background: rgba(8, 11, 18, 0.85);

    backdrop-filter: blur(20px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    padding: 15px 0;
}


.nav-link {

    color: #9da3b4 !important;

    margin: 0 8px;
}


.nav-link:hover {

    color: white !important;
}


/* =========================================
   CUSTOM MOBILE TOGGLER
========================================= */

.custom-toggler {

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: transparent;

    padding: 8px 10px;

    box-shadow: none;
}


.custom-toggler:hover {

    border-color:
        rgba(124, 92, 255, 0.8);

    background:
        rgba(124, 92, 255, 0.08);
}


.custom-toggler:focus {

    box-shadow: none;

    border-color:
        rgba(124, 92, 255, 0.8);
}


.custom-toggler .navbar-toggler-icon {

    filter: invert(1);
}


/* =========================================
   PROFILE BUTTON
========================================= */

.profile-btn {

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.04);

    color: white;

    border-radius: 50px;

    padding: 8px 15px;
}


.dropdown-menu {

    background: #151923;

    border:
        1px solid rgba(255, 255, 255, 0.1);
}


.dropdown-item {

    color: white;
}


.dropdown-item:hover {

    background:
        rgba(124, 92, 255, 0.15);

    color: white;
}


/* =========================================
   HERO
========================================= */

.hero {

    padding: 150px 0 80px;

    position: relative;

    overflow: hidden;
}


.hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background: #654cff;

    filter: blur(180px);

    opacity: 0.15;

    top: -200px;
    left: -100px;
}


.hero .container {
    position: relative;
    z-index: 2;
}


.hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    border:
        1px solid rgba(124, 92, 255, 0.4);

    border-radius: 50px;

    color: #b8aaff;

    background:
        rgba(124, 92, 255, 0.08);

    font-size: 13px;

    margin-bottom: 20px;
}


.hero h1 {

    font-size:
        clamp(42px, 6vw, 75px);

    font-weight: 800;

    line-height: 1.05;
}


.gradient-text {

    background: linear-gradient(90deg,
            #8d72ff,
            #c48cff);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero p {

    color: #9da3b4;

    font-size: 18px;

    line-height: 1.7;

    max-width: 650px;

    margin-top: 20px;
}


/* =========================================
   RESPONSIVE HERO BUTTONS
========================================= */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    flex-wrap: wrap;
}


.hero-btn {

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 13px 24px;

    border-radius: 12px;

    font-weight: 600;

    white-space: nowrap;

    transition: 0.3s ease;
}


.btn-primary-custom {

    background: #7657ff;

    border: 1px solid #7657ff;

    color: white;
}


.btn-primary-custom:hover {

    background: #6344ed;

    color: white;

    transform: translateY(-2px);
}


.btn-secondary-custom {

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    color: white;
}


.btn-secondary-custom:hover {

    background:
        rgba(255, 255, 255, 0.1);

    color: white;

    transform: translateY(-2px);
}


/* =========================================
   SECTION
========================================= */

.section {
    padding: 80px 0;
}


.section-title {

    font-size: 36px;

    font-weight: 800;

    margin-bottom: 10px;
}


.section-subtitle {

    color: #8d94a6;

    margin-bottom: 40px;
}


/* =========================================
   GLASS CARD
========================================= */

.glass-card {

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 20px;

    padding: 28px;

    backdrop-filter: blur(20px);

    transition: 0.35s;
}


.glass-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(124, 92, 255, 0.35);
}


.icon-box {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(124, 92, 255, 0.12);

    color: #9a85ff;

    font-size: 23px;

    margin-bottom: 20px;
}


.card-title {

    font-size: 20px;

    font-weight: 700;
}


.card-text {

    color: #8d94a6;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   RESUME
========================================= */

.upload-area {

    display: block;

    border:
        2px dashed rgba(255, 255, 255, 0.15);

    border-radius: 18px;

    padding: 45px 20px;

    text-align: center;

    cursor: pointer;
}


.upload-area:hover {

    border-color: #7657ff;

    background:
        rgba(118, 87, 255, 0.05);
}


.upload-area i {

    font-size: 45px;

    color: #8b75ff;
}


#resumeInput {
    display: none;
}


.analysis-result {

    display: none;

    margin-top: 25px;
}


.skill-tag {

    display: inline-block;

    padding: 7px 12px;

    background:
        rgba(118, 87, 255, 0.12);

    color: #b9abff;

    border-radius: 20px;

    font-size: 12px;

    margin: 4px;
}

.invalid-resume-message {

    display: none;

}

/* =========================================
   SKILL TEST
========================================= */

.skill-card {
    cursor: pointer;
}


.skill-card.active {

    border-color: #7657ff;

    background:
        rgba(118, 87, 255, 0.08);
}


.skill-card i {

    font-size: 28px;

    color: #967fff;
}


.difficulty {

    font-size: 11px;

    color: #8d94a6;
}


#testPanel {
    display: none;
}


.question-number {

    color: #8e7cff;

    font-size: 13px;

    font-weight: 600;
}


.question {

    font-size: 24px;

    font-weight: 700;

    margin: 15px 0 25px;
}


.option {

    padding: 15px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    margin-bottom: 12px;

    cursor: pointer;

    color: #c7cbd5;
}


.option:hover {

    border-color: #7657ff;

    background:
        rgba(118, 87, 255, 0.08);
}


.option.selected {

    border-color: #7657ff;

    background:
        rgba(118, 87, 255, 0.15);

    color: white;
}


/* =========================================
   PERFORMANCE
========================================= */

.score-circle {

    width: 150px;
    height: 150px;

    border-radius: 50%;

    border: 10px solid #7657ff;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: auto;
}


.score-circle span {

    font-size: 38px;

    font-weight: 800;
}


.progress {

    height: 8px;

    background:
        rgba(255, 255, 255, 0.08);
}


.progress-bar {
    background: #7657ff;
}


.stat-number {

    font-size: 30px;

    font-weight: 800;
}


.stat-label {

    color: #8d94a6;

    font-size: 13px;
}


/* =========================================
   FOOTER
========================================= */

footer {

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    padding: 35px 0;

    color: #73798a;

    margin-top: 50px;
}

/* =========================================
   RESUME ANALYSIS MAIN
========================================= */

.resume-analysis {

    margin-top: 20px;

}

#resumeResults {
    display: block;
}


/* =========================================
   ANALYSIS BLOCK
========================================= */

.analysis-block {

    padding: 26px 0;

    border-bottom: 1px solid #2a303d;

}


.analysis-block:last-child {

    border-bottom: none;

}


/* =========================================
   ANALYSIS TITLE
========================================= */

.analysis-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    font-size: 16px;

    font-weight: 700;

    color: #e5e7eb;

}


.analysis-title i {

    color: #a38cff;

    font-size: 18px;

}


/* =========================================
   HEADINGS
========================================= */

.analysis-block h3 {

    margin: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 16px;

    font-weight: 700;

    color: #e5e7eb;

}


.analysis-block h3 i {

    color: #9985f4;

}


/* DESCRIPTION */

.analysis-description {

    margin: 10px 0 0;

    color: #8e97a7;

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================
   DETECTED SKILLS
========================================= */

.skills-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;

}


.skills-list span {

    padding: 9px 14px;

    border-radius: 20px;

    background: #262744 !important;

    color: #aaa9d8 !important;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================
   BLOCK HEADING ROW
========================================= */

.block-heading-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

}


/* =========================================
   AI BADGE
========================================= */

.ai-badge {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border: 1px solid rgba(140, 110, 255, 0.3);

    border-radius: 20px;

    background: rgba(105, 80, 200, 0.1);

    color: #a78bfa;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}


/* =========================================
   TEST SKILLS
========================================= */

.test-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}


.test-skills span {

    padding: 7px 12px;

    border-radius: 8px;

    background: rgba(90, 75, 180, 0.13);

    border: 1px solid rgba(120, 100, 220, 0.15);

    color: #aaa2df;

    font-size: 11px;

}


/* =========================================
   TEST INFO
========================================= */

.test-info-row {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 20px;

}


.test-info-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border-radius: 12px;

    background: #252932;

    border: 1px solid #343a45;

}


.test-info-item i {

    color: #8f85ed;

    font-size: 18px;

}


.test-info-item strong {

    display: block;

    color: #e1e4e9;

    font-size: 12px;

}


.test-info-item span {

    display: block;

    margin-top: 4px;

    color: #8d95a3;

    font-size: 10px;

}


/* =========================================
   PRIMARY BUTTON
========================================= */

.primary-action-btn {

    margin-top: 20px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 20px;

    border: none;

    border-radius: 10px;

    background: linear-gradient(135deg,
            #765de5,
            #5b75dc);

    color: white;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

}


.primary-action-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(100, 80, 220, 0.2);

}


/* =========================================
   COMPLETED BADGE
========================================= */

.completed-badge {

    padding: 8px 12px;

    border-radius: 20px;

    background: rgba(40, 170, 110, 0.1);

    color: #69d69d;

    font-size: 10px;

    font-weight: 700;

}


/* =========================================
   SCORE BOX
========================================= */

.aptitude-score-box {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 22px;

    padding: 22px;

    border-radius: 15px;

    background: #252932;

    border: 1px solid #343a45;

}


/* SCORE CIRCLE */

.score-circle {

    width: 110px;

    height: 110px;

    min-width: 110px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 7px solid #765de5;

}


.score-circle strong {

    font-size: 26px;

    color: #e8e9ed;

}


.score-circle span {

    margin-top: 4px;

    color: #8d95a3;

    font-size: 10px;

}


/* SCORE DETAILS */

.score-details h4 {

    margin: 0;

    color: #e7e9ee;

    font-size: 16px;

}


.score-details p {

    margin: 8px 0;

    color: #9099a8;

    font-size: 12px;

    line-height: 1.6;

}


/* PROGRESS */

.progress-bar {

    height: 6px;

    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background: #353b46;

}


.progress-fill {

    width: 78%;

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(90deg,
            #745ee4,
            #8c76f2);

}


/* =========================================
   WEAK POINTS
========================================= */

.weak-points-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 20px;

}


.weak-point-card {

    padding: 16px;

    border-radius: 14px;

    background: #252932;

    border: 1px solid #343a45;

}


.weak-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    border-radius: 10px;

    background: rgba(140, 80, 220, 0.12);

    color: #ad8df2;

}


.weak-point-card h4 {

    margin: 0;

    color: #e5e7ec;

    font-size: 13px;

}


.weak-point-card p {

    margin: 7px 0 0;

    color: #8f98a8;

    font-size: 11px;

    line-height: 1.5;

}


/* PRACTICE BUTTON */

.practice-btn {

    margin-top: 20px;

    padding: 11px 18px;

    border-radius: 10px;

    border: 1px solid #5849a7;

    background: rgba(100, 80, 190, 0.08);

    color: #b5a5ff;

    font-size: 12px;

    cursor: pointer;

}


/* =========================================
   OUTLINE BUTTON
========================================= */

.outline-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 9px;

    border: 1px solid #3d4553;

    background: transparent;

    color: #aeb5c0;

    font-size: 11px;

    cursor: pointer;

}


/* =========================================
   ANSWER PREVIEW
========================================= */

.answer-preview {

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.answer-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px;

    border-radius: 10px;

    background: #252932;

    border: 1px solid #343a45;

}


.question-number {

    color: #9690c8;

    font-size: 12px;

    font-weight: 700;

}


.answer-item div {

    flex: 1;

}


.answer-item strong {

    color: #dfe2e8;

    font-size: 12px;

}


.answer-item p {

    margin: 4px 0 0;

    color: #89919f;

    font-size: 10px;

}


.correct>i {

    color: #65cf98;

}


.incorrect>i {

    color: #f17b8e;

}


/* =========================================
   CAREER RECOMMENDATION
========================================= */

.career-recommendation-section {

    display: flex;

    gap: 20px;

    align-items: center;

    margin: 30px 0;

    padding: 25px;

    border-radius: 18px;

    background:

        linear-gradient(135deg,
            rgba(83, 62, 180, 0.18),
            rgba(30, 40, 70, 0.25));

    border: 1px solid rgba(115, 90, 220, 0.35);

}


.career-ai-icon {

    width: 65px;

    height: 65px;

    min-width: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: linear-gradient(135deg,
            #654dd0,
            #5272d8);

    color: white;

    font-size: 26px;

}


.career-content h3 {

    margin: 7px 0;

    color: #ececf2;

    font-size: 18px;

}


.future-label {

    color: #b09bff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.career-content p {

    margin: 0;

    color: #9aa3b3;

    font-size: 12px;

    line-height: 1.6;

}


.career-coming {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color: #b39eff;

    font-size: 11px;

}


/* =========================================
   RESUME IMPROVEMENT
========================================= */

.improvement-list {

    margin-top: 18px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.improvement-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #a1a9b7;

    font-size: 12px;

}


.improvement-item i {

    color: #8e7cf0;

}


/* =========================================
   STANDARD RESUME FORMAT
========================================= */

.standard-resume-section {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 22px;

    margin-top: 30px;

    border-radius: 16px;

    background: #202631;

    border: 1px solid #343b48;

}


.standard-resume-icon {

    width: 55px;

    height: 55px;

    min-width: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: rgba(100, 80, 200, 0.12);

    color: #a38cff;

    font-size: 22px;

}


.standard-resume-content {

    flex: 1;

}


.standard-resume-content span {

    color: #9182d9;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.standard-resume-content h3 {

    margin: 5px 0;

    color: #e5e7ec;

    font-size: 15px;

}


.standard-resume-content p {

    margin: 0;

    color: #929aa8;

    font-size: 11px;

    line-height: 1.5;

}


/* STANDARD BUTTON */

.standard-resume-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 15px;

    border-radius: 10px;

    background: #30394a;

    color: #e4e7ed;

    font-size: 11px;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s;

}


.standard-resume-btn:hover {

    background: #3a4660;

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 768px) {


    .test-info-row {

        grid-template-columns: 1fr;

    }


    .weak-points-grid {

        grid-template-columns: 1fr;

    }


    .block-heading-row {

        flex-direction: column;

    }


    .aptitude-score-box {

        flex-direction: column;

        align-items: flex-start;

    }


    .career-recommendation-section {

        flex-direction: column;

        align-items: flex-start;

    }


    .standard-resume-section {

        flex-direction: column;

        align-items: flex-start;

    }


    .standard-resume-btn {

        width: 100%;

        justify-content: center;

    }

}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .navbar-collapse {

        margin-top: 15px;

        padding: 15px;

        border-radius: 15px;

        background:
            rgba(15, 18, 28, 0.95);

        border:
            1px solid rgba(255, 255, 255, 0.08);
    }


    .navbar-nav {
        align-items: stretch !important;
    }


    .nav-link {

        padding: 12px !important;

        margin: 0 !important;
    }


    .profile-btn {

        margin-top: 10px;

        width: 100%;
    }


    .hero {
        padding-top: 120px;
    }
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .hero {
        padding: 110px 0 60px;
    }


    .hero h1 {

        font-size: 43px;

        line-height: 1.1;
    }


    .hero p {

        font-size: 17px;

        line-height: 1.7;
    }


    .section {
        padding: 60px 0;
    }


    .section-title {
        font-size: 30px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 576px) {

    .auth-navbar {
        padding: 20px;
    }


    .auth-card {
        padding: 30px 22px;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

        width: 100%;
    }


    .hero-btn {

        width: 100%;

        min-height: 54px;
    }


    .hero h1 {

        font-size: 40px;

        line-height: 1.1;
    }


    .hero p {

        font-size: 16px;

        line-height: 1.7;
    }


    .hero-badge {

        font-size: 11px;
    }


    .section-title {
        font-size: 28px;
    }


    .glass-card {
        padding: 20px;
    }


    .question {
        font-size: 20px;
    }


    .form-options {

        flex-direction: column;

        align-items: flex-start;
    }
}

/* =========================================
   WELCOME PAGE
========================================= */

#welcomePage {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}


/* NAVBAR */

.welcome-navbar {
    width: 100%;
    padding: 22px 7%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;

    z-index: 10;
}


.welcome-login-btn {
    padding: 10px 22px;

    border-radius: 10px;

    background: transparent;

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.12);

    transition: 0.3s;
}


.welcome-login-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* GLOW EFFECT */

.glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(160px);

    opacity: 0.22;

    pointer-events: none;
}


.glow-1 {
    background: #5b45ff;

    top: -200px;
    left: -150px;
}


.glow-2 {
    background: #a855f7;

    bottom: 0;
    right: -150px;
}


/* HERO */

.welcome-hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 140px 0 80px;

    position: relative;
}


.welcome-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    border-radius: 50px;

    border: 1px solid rgba(124, 92, 255, 0.35);

    background: rgba(124, 92, 255, 0.08);

    color: #b8aaff;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1px;

    margin-bottom: 22px;
}


.welcome-hero h1 {
    font-size: clamp(48px, 6vw, 78px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;
}


.welcome-hero h1 span {
    background: linear-gradient(90deg,
            #8d72ff,
            #d28cff);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.welcome-description {
    max-width: 600px;

    margin-top: 24px;

    color: #9da3b4;

    font-size: 18px;

    line-height: 1.8;
}


/* BUTTONS */

.welcome-buttons {
    display: flex;

    gap: 14px;

    margin-top: 32px;

    flex-wrap: wrap;
}


.start-btn {
    min-height: 54px;

    padding: 0 25px;

    border: none;

    border-radius: 13px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    background: linear-gradient(135deg,
            #6d55ff,
            #9d4edd);

    color: white;

    font-weight: 600;

    transition: 0.4s;

    min-width: 160px;

    white-space: nowrap;
}


.start-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 35px rgba(109, 85, 255, 0.3);
}


.learn-btn {
    min-height: 54px;

    padding: 0 25px;

    border-radius: 13px;

    background: transparent;

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.12);

    transition: 0.3s;
}


.learn-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}


/* POINTS */

.welcome-points {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 28px;

    color: #9da3b4;

    font-size: 13px;
}


.welcome-points div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.welcome-points i {
    color: #8b75ff;
}


/* =========================================
   AI VISUAL
========================================= */

.ai-visual {
    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.ai-main-card {
    width: 100%;

    max-width: 420px;

    padding: 28px;

    border-radius: 24px;

    background:
        rgba(20, 25, 38, 0.75);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(20px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4);
}


.ai-card-header {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.ai-avatar {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            #6d55ff,
            #a855f7);

    font-size: 22px;
}


.ai-card-header small {
    color: #8d94a6;

    font-size: 10px;

    letter-spacing: 1px;
}


.ai-card-header h5 {
    margin: 3px 0 0;

    font-size: 16px;
}


.online-dot {
    width: 9px;
    height: 9px;

    margin-left: auto;

    border-radius: 50%;

    background: #4ade80;

    box-shadow:
        0 0 15px #4ade80;
}


/* PROGRESS */

.ai-progress-box {
    margin-top: 25px;

    color: #aab0bf;

    font-size: 13px;
}


.ai-progress-box strong {
    color: white;
}


.ai-progress {
    width: 100%;

    height: 7px;

    margin-top: 10px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.08);

    overflow: hidden;
}


.ai-progress div {
    width: 82%;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #6d55ff,
            #c084fc);
}


/* SKILLS */

.ai-skill-row {
    display: flex;

    justify-content: space-between;

    padding: 15px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    color: #aab0bf;

    font-size: 13px;
}


.ai-skill-row strong {
    color: white;
}


/* AI MESSAGE */

.ai-message {
    display: flex;

    gap: 12px;

    margin-top: 20px;

    padding: 15px;

    border-radius: 14px;

    background:
        rgba(124, 92, 255, 0.08);

    border:
        1px solid rgba(124, 92, 255, 0.15);
}


.ai-message i {
    color: #a78bfa;
}


.ai-message p {
    margin: 0;

    font-size: 12px;

    color: #aab0bf;

    line-height: 1.6;
}


/* FLOATING CARDS */

.floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border-radius: 15px;

    background:
        rgba(22, 27, 40, 0.85);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(15px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3);

    animation:
        floating 4s ease-in-out infinite;
}


@keyframes floating {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(-10px);

    }

}


.resume-card {
    top: 40px;

    left: -30px;
}


.test-card {
    bottom: 50px;

    right: -30px;

    animation-delay: 1s;
}


.floating-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(124, 92, 255, 0.15);

    color: #a78bfa;
}


.floating-card small {
    display: block;

    color: #7f8797;

    font-size: 10px;
}


.floating-card strong {
    font-size: 12px;
}


.success-icon {
    color: #4ade80;

    margin-left: 10px;
}


/* =========================================
   FEATURES
========================================= */

.welcome-features {
    padding: 110px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);
}


.welcome-section-header {
    text-align: center;

    max-width: 650px;

    margin:
        0 auto 55px;
}


.mini-title {
    color: #a78bfa;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.welcome-section-header h2 {
    font-size: clamp(30px,
            4vw,
            50px);

    font-weight: 800;

    margin-top: 15px;
}


.welcome-section-header h2 span {
    color: #a78bfa;
}


.welcome-section-header p {
    color: #8d94a6;

    margin-top: 15px;
}


/* FEATURE CARD */

.welcome-feature-card {
    position: relative;

    height: 100%;

    padding: 30px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    transition: 0.35s;
}


.welcome-feature-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(124, 92, 255, 0.4);

    background:
        rgba(124, 92, 255, 0.05);
}


.feature-number {
    position: absolute;

    top: 22px;
    right: 25px;

    color: #3e4350;

    font-size: 12px;

    font-weight: 700;
}


.feature-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        rgba(124, 92, 255, 0.12);

    color: #a78bfa;

    font-size: 24px;

    margin-bottom: 25px;
}


.welcome-feature-card h4 {
    font-weight: 700;
}


.welcome-feature-card p {
    margin-top: 12px;

    color: #8d94a6;

    line-height: 1.7;

    font-size: 14px;
}


/* =========================================
   CTA
========================================= */

.welcome-cta {
    padding:
        30px 0 100px;
}


.cta-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 45px;

    border-radius: 25px;

    background:
        linear-gradient(135deg,
            rgba(91, 69, 255, 0.16),
            rgba(168, 85, 247, 0.08));

    border:
        1px solid rgba(124, 92, 255, 0.2);
}


.cta-box h2 {
    font-size: clamp(28px,
            3vw,
            42px);

    font-weight: 800;

    margin-top: 10px;
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 991px) {


    .welcome-hero {
        text-align: center;

        padding-top: 150px;
    }


    .welcome-description {
        margin-left: auto;
        margin-right: auto;
    }


    .welcome-buttons {
        justify-content: center;
    }


    .welcome-points {
        justify-content: center;

        margin-bottom: 50px;
    }


    .ai-visual {
        max-width: 520px;

        margin: auto;
    }


}


@media (max-width: 768px) {


    .welcome-navbar {
        padding: 20px;
    }


    .welcome-hero {
        padding:
            130px 0 60px;
    }


    .welcome-hero h1 {
        font-size: 48px;

        letter-spacing: -1px;
    }


    .welcome-description {
        font-size: 16px;
    }


    .ai-visual {
        min-height: 430px;
    }


    .resume-card {
        left: 0;
    }


    .test-card {
        right: 0;
    }


    .cta-box {
        flex-direction: column;

        text-align: center;

        padding: 35px 25px;
    }


}


@media (max-width: 576px) {


    .brand {
        font-size: 20px;
    }


    .brand-icon {
        width: 34px;
        height: 34px;
    }


    .welcome-login-btn {
        padding: 9px 16px;

        font-size: 13px;
    }


    .welcome-hero h1 {
        font-size: 40px;
    }


    .welcome-badge {
        font-size: 9px;

        letter-spacing: 0.5px;
    }


    .welcome-buttons {
        flex-direction: column;

        width: 100%;
    }


    .start-btn,
    .learn-btn {
        width: 100%;
    }


    .welcome-points {
        flex-direction: column;

        align-items: center;

        gap: 10px;
    }


    .ai-visual {
        min-height: 400px;
    }


    .ai-main-card {
        padding: 20px;
    }


    .floating-card {
        transform: scale(0.85);
    }


    .resume-card {
        top: 15px;

        left: -15px;
    }


    .test-card {
        bottom: 10px;

        right: -15px;
    }


    .welcome-features {
        padding: 75px 0;
    }


}

@media (max-width: 576px) {

    .back-home-btn {
        top: 15px;
        left: 15px;

        padding: 8px 12px;

        font-size: 12px;
    }

}


/* =========================================
   HOW IT WORKS MAIN SECTION
========================================= */

.how-it-works {

    position: relative;

    padding: 130px 65px;

    background: #090d17;

    overflow: hidden;

    border-top: 1px solid #202635;

}


/* =========================================
   MAIN CONTAINER
========================================= */

.how-container {

    width: 100%;

    max-width: 1700px;

    margin: auto;

    position: relative;

    z-index: 2;

}


/* =========================================
   BACKGROUND GLOWS
========================================= */

.how-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(160px);

    pointer-events: none;

}


.glow-left {

    top: 15%;

    left: -300px;

    background: rgba(103, 80, 220, 0.08);

}


.glow-right {

    bottom: 5%;

    right: -300px;

    background: rgba(69, 105, 220, 0.08);

}


/* =========================================
   SECTION HEADER
========================================= */

.how-header {

    max-width: 800px;

    margin-bottom: 80px;

}


.section-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 18px;

    border-radius: 30px;

    border: 1px solid #514294;

    background: rgba(78, 59, 145, 0.12);

    color: #c3b8ff;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    margin-bottom: 25px;

}


.how-header h2 {

    font-size: clamp(45px, 5vw, 75px);

    font-weight: 800;

    letter-spacing: -3px;

    color: #f5f5f7;

}


.how-header h2 span {

    background: linear-gradient(90deg,
            #6e91e9,
            #806de8,
            #aa7ff1);
    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.how-header p {

    margin-top: 22px;

    font-size: 20px;

    line-height: 1.7;

    color: #9da5b5;

    max-width: 650px;

}


/* =========================================
   JOURNEY INTRO
========================================= */

.journey-intro {

    display: flex;

    align-items: center;

    gap: 18px;

    padding-bottom: 25px;

    margin-bottom: 40px;

    border-bottom: 1px solid #202635;

}


.journey-intro-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    background: rgba(112, 80, 220, 0.15);

    border: 1px solid rgba(130, 105, 230, 0.2);

    color: #9f87ff;

    font-size: 23px;

}


.journey-intro span {

    color: #8875d9;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.journey-intro h3 {

    margin-top: 5px;

    font-size: 24px;

}


/* =========================================
   JOURNEY BLOCK
========================================= */

.journey-block {

    margin-top: 45px;

}


/* =========================================
   JOURNEY TITLE
========================================= */

.journey-title {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 35px;

}


.journey-number {

    min-width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: linear-gradient(135deg,
            #6247d8,
            #8a5ce8);

    font-size: 18px;

    font-weight: 800;

}


.journey-label {

    font-size: 12px;

    color: #9b85ec;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.journey-title h3 {

    margin-top: 5px;

    font-size: 30px;

    font-weight: 700;

}


.journey-title p {

    margin-top: 10px;

    color: #919aaa;

    font-size: 16px;

    line-height: 1.6;

}


/* =========================================
   MAIN STEPS GRID
========================================= */

.steps-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}


/* =========================================
   WORKFLOW CARD
========================================= */

.workflow-card {

    min-height: 240px;

    padding: 24px;

    position: relative;

    border-radius: 22px;

    border: 1px solid #252c3a;

    background:

        linear-gradient(145deg,
            rgba(24, 30, 43, 0.9),
            rgba(13, 18, 29, 0.9));

    transition: 0.35s;

}


.workflow-card:hover {

    transform: translateY(-8px);

    border-color: rgba(128, 100, 230, 0.5);

    box-shadow:

        0 20px 50px rgba(0, 0, 0, 0.3);

}


.step-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.step-top>span {

    font-size: 12px;

    color: #6e7685;

    font-weight: 700;

}


.workflow-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: rgba(104, 78, 220, 0.13);

    border: 1px solid rgba(125, 100, 230, 0.15);

    color: #a68cff;

    font-size: 22px;

}


.workflow-card h4 {

    margin-top: 35px;

    font-size: 20px;

    color: #eeeeee;

}


.workflow-card p {

    margin-top: 12px;

    font-size: 14px;

    line-height: 1.6;

    color: #8f98a8;

}


/* =========================================
   ACTIVE / IMPORTANT CARD
========================================= */

.active-card {

    border-color: rgba(126, 97, 226, 0.35);

    background:

        linear-gradient(145deg,
            rgba(73, 52, 145, 0.18),
            rgba(13, 18, 29, 0.95));

}


/* =========================================
   ANALYSIS CARD
========================================= */

.analysis-card .workflow-icon {

    color: #61a6ff;

    background: rgba(54, 125, 255, 0.12);

}


/* =========================================
   PRACTICE CARD
========================================= */

.practice-card .workflow-icon {

    color: #d197ff;

}


/* =========================================
   OR DIVIDER
========================================= */

.journey-divider {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 90px 0;

    position: relative;

}


.journey-divider::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 1px;

    background: #252c38;

}


.journey-divider span {

    position: relative;

    z-index: 2;

    padding: 12px 18px;

    border-radius: 50%;

    background: #090d17;

    border: 1px solid #313847;

    color: #9b85ec;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================
   DIRECT JOURNEY
========================================= */

.direct-journey {

    margin-top: 0;

}


.direct-number {

    background:

        linear-gradient(135deg,
            #3f68c9,
            #5d88e9);

}


/* =========================================
   DIRECT FLOW
========================================= */

.direct-flow {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 35px;

    border-radius: 28px;

    border: 1px solid #252c3a;

    background:

        linear-gradient(145deg,
            rgba(20, 26, 39, 0.95),
            rgba(11, 15, 24, 0.95));

}


/* =========================================
   DIRECT STEP
========================================= */

.direct-step {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

}


.direct-icon {

    width: 52px;

    height: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(65, 105, 210, 0.12);

    border: 1px solid rgba(85, 130, 230, 0.15);

    color: #7ca7ff;

    font-size: 20px;

}


.direct-step span {

    color: #747e8d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


.direct-step h4 {

    margin-top: 5px;

    font-size: 16px;

    line-height: 1.3;

}


/* =========================================
   FLOW ARROW
========================================= */

.flow-arrow {

    color: #7562cf;

    font-size: 20px;

}


/* =========================================
   AI CAREER RECOMMENDATION SECTION
========================================= */

.career-section {

    position: relative;

    margin-top: 110px;

    padding: 2px;

    border-radius: 30px;

    overflow: hidden;

    background:

        linear-gradient(135deg,
            rgba(102, 75, 220, 0.7),
            rgba(54, 105, 220, 0.3),
            rgba(120, 80, 210, 0.5));

}


/* INNER BACKGROUND */

.career-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 45px;

    border-radius: 29px;

    background:

        linear-gradient(110deg,
            #141925,
            #101522);

}


/* AI ICON */

.career-icon {

    width: 75px;

    height: 75px;

    min-width: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    background:

        linear-gradient(135deg,
            #6346d8,
            #496fd9);

    font-size: 30px;

}


/* CAREER TEXT */

.career-text {

    flex: 1;

}


.career-text span {

    color: #a58cff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.career-text h3 {

    margin-top: 8px;

    font-size: 28px;

}


.career-text p {

    max-width: 800px;

    margin-top: 12px;

    color: #9ca5b5;

    line-height: 1.6;

}


/* ARROW */

.career-arrow {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(110, 85, 220, 0.15);

    border: 1px solid rgba(140, 115, 255, 0.3);

    color: #a98eff;

    font-size: 24px;

}


/* =========================================
   CAREER GLOW
========================================= */

.career-glow {

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    right: -100px;

    top: -150px;

    background: rgba(112, 75, 255, 0.25);

    filter: blur(100px);

}


/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1200px) {


    .steps-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .direct-flow {

        flex-wrap: wrap;

    }


    .direct-step {

        min-width: 40%;

    }


    .flow-arrow {

        display: none;

    }

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 700px) {


    .how-it-works {

        padding: 90px 20px;

    }


    .how-header {

        margin-bottom: 55px;

    }


    .how-header h2 {

        letter-spacing: -2px;

    }


    .how-header p {

        font-size: 16px;

    }


    .journey-title h3 {

        font-size: 23px;

    }


    .steps-grid {

        grid-template-columns: 1fr;

    }


    .workflow-card {

        min-height: 220px;

    }


    .journey-divider {

        margin: 65px 0;

    }


    .direct-flow {

        flex-direction: column;

        align-items: stretch;

        padding: 20px;

    }


    .direct-step {

        width: 100%;

        padding: 15px 0;

        border-bottom: 1px solid #252c3a;

    }


    .direct-step:last-child {

        border-bottom: none;

    }


    .career-section {

        margin-top: 70px;

    }


    .career-content {

        flex-direction: column;

        align-items: flex-start;

        padding: 30px 25px;

    }


    .career-text h3 {

        font-size: 24px;

    }


    .career-arrow {

        align-self: flex-end;

    }

}

/* =========================================
   AI GUIDED JOURNEY SECTION
========================================= */

.ai-guided-journey {

    padding: 100px 0;

}


/* =========================================
   HEADING
========================================= */

.journey-heading {

    display: flex;

    align-items: flex-start;

    gap: 28px;

    margin-bottom: 70px;

}


/* NUMBER BOX */

.journey-badge {

    width: 88px;

    height: 88px;

    min-width: 88px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 28px;

    background: linear-gradient(135deg,
            #2f4f86,
            #5d87db);

    color: #f4f5f7;

    font-size: 28px;

    font-weight: 800;

}


/* SMALL TITLE */

.journey-small-title {

    display: block;

    color: #aaa3dc;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-top: 8px;

}


/* MAIN TITLE */

.journey-heading h2 {

    margin: 12px 0 15px;

    color: #f2f3f5;

    font-size: clamp(30px, 3vw, 52px);

    font-weight: 750;

    letter-spacing: -1.5px;

}


/* DESCRIPTION */

.journey-heading p {

    margin: 0;

    color: #9da6b8;

    font-size: 20px;

    line-height: 1.6;

}


/* =========================================
   MAIN FLOW BOX
========================================= */

.ai-flow-box {

    width: 100%;

    padding: 55px 52px;

    border: 1px solid #273246;

    border-radius: 42px;

    background:

        linear-gradient(145deg,
            #171f2d,
            #0f1621);

    box-shadow:

        0 25px 70px rgba(0, 0, 0, 0.18);

}


/* =========================================
   FLOW ROW
========================================= */

.ai-flow-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


/* =========================================
   INDIVIDUAL STEP
========================================= */

.ai-flow-step {

    display: flex;

    align-items: center;

    gap: 20px;

    flex: 1;

    min-width: 0;

}


/* =========================================
   ICON BOX
========================================= */

.ai-step-icon {

    width: 78px;

    height: 78px;

    min-width: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 24px;

    background:

        linear-gradient(145deg,
            #1c2b46,
            #152035);

    border:

        1px solid rgba(92, 135, 220, 0.25);

    color: #86aef8;

    font-size: 30px;

}


/* =========================================
   TEXT
========================================= */

.ai-step-text span {

    display: block;

    margin-bottom: 10px;

    color: #8b95a8;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.ai-step-text h3 {

    margin: 0;

    color: #e6e8ed;

    font-size: 20px;

    font-weight: 650;

    line-height: 1.35;

}


/* =========================================
   ARROW
========================================= */

.ai-flow-arrow {

    color: #8974db;

    font-size: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   ROW DIVIDER
========================================= */

.ai-flow-divider {

    width: 100%;

    height: 1px;

    margin: 50px 0;

    background:

        linear-gradient(90deg,
            transparent,
            #303a4c,
            transparent);

}


/* =========================================
   FUTURE AI STEP
========================================= */

.future-step .ai-step-icon {

    background:

        linear-gradient(135deg,
            rgba(104, 73, 210, 0.3),
            rgba(51, 92, 184, 0.3));

    border-color:

        rgba(140, 108, 255, 0.45);

}


.future-step .ai-step-text span {

    color: #aa95ff;

}


/* =========================================
   HOVER EFFECT
========================================= */

.ai-flow-step {

    transition: 0.3s ease;

}


.ai-flow-step:hover {

    transform: translateY(-5px);

}


.ai-flow-step:hover .ai-step-icon {

    border-color:

        rgba(137, 113, 240, 0.65);

    box-shadow:

        0 10px 35px rgba(90, 70, 190, 0.15);

}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 1250px) {


    .ai-flow-box {

        padding: 45px 30px;

    }


    .ai-flow-row {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .ai-flow-arrow {

        display: none;

    }


    .ai-flow-step {

        padding: 15px;

    }

}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 700px) {


    .ai-guided-journey {

        padding: 70px 0;

    }


    .journey-heading {

        flex-direction: column;

        gap: 20px;

        margin-bottom: 45px;

    }


    .journey-badge {

        width: 70px;

        height: 70px;

        min-width: 70px;

        border-radius: 22px;

        font-size: 24px;

    }


    .journey-small-title {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .journey-heading h2 {

        font-size: 36px;

    }


    .journey-heading p {

        font-size: 16px;

    }


    .ai-flow-box {

        padding: 25px;

        border-radius: 28px;

    }


    .ai-flow-row {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .ai-flow-step {

        padding: 15px 0;

        border-bottom: 1px solid #263143;

    }


    .ai-flow-row .ai-flow-step:last-child {

        border-bottom: none;

    }


    .ai-step-icon {

        width: 62px;

        height: 62px;

        min-width: 62px;

        border-radius: 18px;

        font-size: 24px;

    }


    .ai-step-text h3 {

        font-size: 17px;

    }


    .ai-flow-divider {

        margin: 25px 0;

    }

}

/* =========================================
   SKILL BASED TESTS SECTION
========================================= */

.skill-tests-section {
    padding: 110px 0;
}


/* =========================================
   SECTION HEADING
========================================= */

.skill-tests-heading {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 60px;
    margin-left: 30px;
}

/* .skill-number-badge {
    width: 88px;
    height: 88px;
    min-width: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 28px;

    background: linear-gradient(135deg,
            #2f4f86,
            #5d87db);

    color: #fff;

    font-size: 28px;
    font-weight: 800;

    margin-left:10px;
} */

.skill-small-title {
    display: block;

    color: #aaa3dc;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;

    margin-top: 8px;
}

.skill-heading-content h2 {
    margin: 12px 0 15px;

    color: #f2f3f5;

    font-size: clamp(38px, 4vw, 58px);

    font-weight: 750;

    letter-spacing: -1.5px;
}

.skill-heading-content p {
    max-width: 720px;

    margin: 0;

    color: #9da6b8;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================
   INTRO CARD
========================================= */

.skill-test-intro-card {
    display: flex;

    justify-content: space-between;

    gap: 40px;

    padding: 35px;

    margin-bottom: 35px;

    border-radius: 28px;

    background: linear-gradient(145deg,
            #171f2d,
            #101722);

    border: 1px solid #273246;
}

.skill-test-intro-left {
    display: flex;

    gap: 20px;
}

.skill-test-icon-large {
    width: 70px;
    height: 70px;

    min-width: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: rgba(93, 120, 220, 0.15);

    color: #8daeff;

    font-size: 28px;
}

.intro-label,
.levels-label {
    color: #aaa3dc;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.skill-test-intro-left h3 {
    margin: 10px 0;

    color: #f0f1f4;

    font-size: 23px;
}

.skill-test-intro-left p {
    margin: 0;

    max-width: 600px;

    color: #929cac;

    font-size: 14px;

    line-height: 1.7;
}


/* TEST RULES */

.test-rules {
    display: flex;

    gap: 12px;

    align-items: center;
}

.test-rule {
    min-width: 120px;

    padding: 16px;

    text-align: center;

    border-radius: 15px;

    background: #1e2735;

    border: 1px solid #2d394b;
}

.test-rule i {
    display: block;

    margin-bottom: 10px;

    color: #9b87f5;

    font-size: 20px;
}

.test-rule strong {
    display: block;

    color: #e8eaf0;

    font-size: 13px;
}

.test-rule span {
    display: block;

    margin-top: 5px;

    color: #8c96a6;

    font-size: 10px;
}


/* =========================================
   LEVELS CONTAINER
========================================= */

.levels-container {
    padding: 35px;

    border-radius: 28px;

    background: #111824;

    border: 1px solid #263144;
}

.levels-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 30px;
}

.levels-header h3 {
    margin: 8px 0 0;

    color: #f0f2f5;

    font-size: 26px;
}

.levels-header p {
    margin: 0;

    color: #8791a0;

    font-size: 13px;
}


/* =========================================
   LEVEL GRID
========================================= */

.levels-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;
}

.level-card {
    position: relative;

    padding: 18px;

    min-height: 210px;

    border-radius: 18px;

    background: #1a2230;

    border: 1px solid #2b3648;

    transition: 0.3s ease;

    cursor: pointer;
}

.level-card:hover {
    transform: translateY(-7px);

    border-color: #655fc1;
}


/* TOP */

.level-top {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

.level-number {
    color: #778399;

    font-size: 13px;

    font-weight: 800;
}

.difficulty {
    padding: 5px 8px;

    border-radius: 8px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}

.easy {
    background: rgba(74, 190, 130, 0.12);
    color: #6ed49a;
}

.medium {
    background: rgba(235, 174, 73, 0.12);
    color: #e8bc6b;
}

.hard {
    background: rgba(232, 101, 120, 0.12);
    color: #f08b9a;
}

.expert {
    background: rgba(160, 110, 255, 0.15);
    color: #ba9cff;
}


/* ICON */

.level-icon {
    display: block;

    margin: 25px 0 15px;

    color: #8f8be8;

    font-size: 26px;
}


/* CONTENT */

.level-card h4 {
    margin: 0;

    color: #e9ebf0;

    font-size: 15px;
}

.level-card p {
    margin: 8px 0;

    color: #8993a3;

    font-size: 11px;

    line-height: 1.5;
}

.question-count {
    position: absolute;

    bottom: 18px;

    color: #a0a9b8;

    font-size: 10px;
}


/* =========================================
   RESULT FLOW
========================================= */

.skill-result-flow {
    margin-top: 35px;

    padding: 40px 35px;

    border-radius: 28px;

    background: linear-gradient(145deg,
            #171f2d,
            #101722);

    border: 1px solid #273246;
}

.result-flow-header {
    text-align: center;

    margin-bottom: 35px;
}

.result-flow-header span {
    color: #a79ae6;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.result-flow-header h3 {
    margin: 10px 0 0;

    color: #eef0f4;

    font-size: 27px;
}

.result-flow-grid {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;
}

.result-flow-card {
    flex: 1;

    min-height: 170px;

    padding: 20px;

    text-align: center;

    border-radius: 18px;

    background: #1c2533;

    border: 1px solid #2d394a;
}

.result-icon {
    width: 45px;

    height: 45px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(130, 100, 220, 0.13);

    color: #a18df5;

    font-size: 19px;
}

.result-flow-card h4 {
    margin: 0;

    color: #e8eaf0;

    font-size: 14px;
}

.result-flow-card p {
    margin: 9px 0 0;

    color: #8993a2;

    font-size: 11px;

    line-height: 1.5;
}

.result-arrow {
    color: #776ee1;

    font-size: 22px;
}


/* =========================================
   FINAL CTA
========================================= */

.skill-tests-cta {
    margin-top: 35px;

    padding: 30px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 20px;

    background: linear-gradient(135deg,
            rgba(92, 74, 190, 0.22),
            rgba(43, 71, 140, 0.18));

    border: 1px solid rgba(110, 90, 220, 0.3);
}

.skill-tests-cta span {
    color: #aa9bf0;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

.skill-tests-cta h3 {
    margin: 7px 0 0;

    color: #f0f1f5;

    font-size: 21px;
}

.skill-start-btn {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 20px;

    border-radius: 12px;

    background: linear-gradient(135deg,
            #745de2,
            #5577d9);

    color: white;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: 0.3s;
}

.skill-start-btn:hover {
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .levels-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .skill-test-intro-card {
        flex-direction: column;
    }

    .test-rules {
        justify-content: flex-start;
    }

    .result-flow-grid {
        flex-wrap: wrap;
    }

    .result-arrow {
        display: none;
    }

    .result-flow-card {
        min-width: 200px;
    }

}


@media (max-width: 700px) {

    .skill-tests-section {
        padding: 75px 0;
    }

    .skill-tests-heading {
        flex-direction: column;
        gap: 20px;
    }

    .skill-number-badge {
        width: 70px;
        height: 70px;
        min-width: 70px;

        font-size: 24px;
    }

    .skill-heading-content h2 {
        font-size: 36px;
    }

    .skill-test-intro-card,
    .levels-container,
    .skill-result-flow {
        padding: 22px;
    }

    .skill-test-intro-left {
        flex-direction: column;
    }

    .test-rules {
        flex-direction: column;
    }

    .test-rule {
        width: 100%;
    }

    .levels-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

    .levels-grid {
        grid-template-columns: 1fr;
    }

    .level-card {
        min-height: 190px;
    }

    .skill-tests-cta {
        flex-direction: column;

        align-items: flex-start;
    }

    .skill-start-btn {
        width: 100%;

        justify-content: center;
    }

}

/* =========================================
   SKILL BASED TESTS
========================================= */

.skill-tests-section {
    padding: 100px 0;
}


/* =========================================
   HEADING
========================================= */

.skill-tests-heading {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 55px;
}

.skill-number-badge {
    width: 88px;
    height: 88px;
    min-width: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 28px;

    background: linear-gradient(135deg,
            #2f4f86,
            #5d87db);

    color: white;

    font-size: 28px;
    font-weight: 800;
}

.skill-small-title {
    display: block;

    margin-top: 8px;

    color: #aaa3dc;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
}

.skill-heading-content h2 {
    margin: 12px 0 15px;

    color: #f2f3f5;

    font-size: clamp(38px, 4vw, 58px);
}

.skill-heading-content p {
    max-width: 720px;

    margin: 0;

    color: #9da6b8;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================
   SKILLS BOX
========================================= */

.skills-selection-box {
    padding: 35px;

    border-radius: 30px;

    background: linear-gradient(145deg,
            #171f2d,
            #101722);

    border: 1px solid #273246;

    margin: 30px;
}

.skills-selection-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 30px;
}

.skills-selection-header span {
    color: #aaa3dc;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.skills-selection-header h3 {
    margin: 10px 0 0;

    color: #eef0f4;

    font-size: 27px;
}


/* INFO */

.skill-test-info {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #939cab;
}

.skill-test-info span {
    font-size: 11px;

    letter-spacing: 0;

    color: #939cab;
}

.info-line {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #786ae0;
}


/* =========================================
   SKILLS GRID
========================================= */

.skills-test-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 14px;
}

.test-skill-card {
    padding: 20px;

    min-height: 170px;

    border-radius: 17px;

    background: #1b2432;

    border: 1px solid #2d394b;

    cursor: pointer;

    transition: 0.3s ease;
}

.test-skill-card:hover {
    transform: translateY(-6px);

    border-color: #685ec8;

    background: #1f2939;
}

.test-skill-icon {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 13px;

    background: rgba(110, 90, 210, 0.12);

    color: #a292f2;

    font-size: 20px;
}

.test-skill-card h4 {
    margin: 0;

    color: #e8eaf0;

    font-size: 15px;
}

.test-skill-card p {
    margin: 8px 0 0;

    color: #8d97a6;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================
   TEST STRUCTURE
========================================= */

.skill-test-structure {
    margin-top: 35px;

    padding: 40px 35px;

    border-radius: 28px;

    background: #111824;

    border: 1px solid #273246;
}

.structure-heading {
    text-align: center;

    margin-bottom: 35px;
}

.structure-heading span {
    color: #a89ae9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.structure-heading h3 {
    margin: 10px 0 0;

    color: #eef0f4;

    font-size: 27px;
}


/* FLOW */

.structure-flow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;
}

.structure-step {
    flex: 1;

    text-align: center;
}

.structure-icon {
    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 16px;

    background: rgba(105, 80, 200, 0.13);

    color: #a492f5;

    font-size: 21px;
}

.structure-step h4 {
    margin: 0;

    color: #e7e9ef;

    font-size: 13px;
}

.structure-step p {
    margin: 8px 0 0;

    color: #8b95a5;

    font-size: 10px;

    line-height: 1.5;
}

.structure-arrow {
    color: #7169d6;

    font-size: 21px;
}


/* =========================================
   LEVELS SUMMARY
========================================= */

.levels-summary {
    margin-top: 35px;

    padding: 35px;

    border-radius: 28px;

    background: linear-gradient(145deg,
            #171f2d,
            #101722);

    border: 1px solid #273246;
}

.levels-summary-heading {
    text-align: center;

    margin-bottom: 30px;
}

.levels-summary-heading span {
    color: #a89ae9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.levels-summary-heading h3 {
    margin: 10px 0 0;

    color: #eef0f4;

    font-size: 27px;
}


/* LEVEL GRID */

.levels-summary-grid {
    display: grid;

    grid-template-columns: repeat(10, 1fr);

    gap: 8px;
}

.summary-level {
    padding: 16px 5px;

    text-align: center;

    border-radius: 12px;

    background: #1d2634;

    border: 1px solid #2d394a;
}

.summary-level strong {
    display: block;

    color: #b0a3f8;

    font-size: 16px;
}

.summary-level span {
    display: block;

    margin-top: 5px;

    color: #8d97a6;

    font-size: 9px;
}

.final-level {
    border-color: #6356c5;

    background: rgba(100, 80, 200, 0.13);
}

.levels-bottom-text {
    margin: 25px auto 0;

    max-width: 700px;

    text-align: center;

    color: #929cab;

    font-size: 13px;

    line-height: 1.7;
}

.levels-bottom-text strong {
    color: #b3a3ff;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .skills-test-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .structure-flow {
        flex-wrap: wrap;
    }

    .structure-arrow {
        display: none;
    }

    .structure-step {
        min-width: 180px;
    }

    .levels-summary-grid {
        grid-template-columns: repeat(5, 1fr);
    }

}


@media (max-width: 700px) {

    .skill-tests-section {
        padding: 70px 0;
    }

    .skill-tests-heading {
        flex-direction: column;
    }

    .skills-selection-box,
    .skill-test-structure,
    .levels-summary {
        padding: 22px;
    }

    .skills-selection-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .skills-test-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .test-skill-card {
        min-height: 155px;
    }

    .structure-step {
        min-width: 100%;
    }

    .levels-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* =========================================
   SKILL TEST EXAMPLE
========================================= */

.skill-test-example {
    margin-top: 35px;

    padding: 35px;

    border-radius: 28px;

    background: #111824;

    border: 1px solid #273246;
}


/* HEADER */

.example-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;
}

.example-label {
    color: #a89ae9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.example-header h3 {
    margin: 10px 0 8px;

    color: #eef0f4;

    font-size: 27px;
}

.example-header p {
    margin: 0;

    color: #909aaa;

    font-size: 13px;

    line-height: 1.6;
}


/* SKILL BADGE */

.example-skill-badge {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 18px;

    border-radius: 13px;

    background: rgba(105, 80, 200, 0.14);

    border: 1px solid rgba(130, 110, 230, 0.25);

    color: #b2a4ff;

    font-size: 13px;

    font-weight: 700;
}


/* TEST CARD */

.example-test-card {
    padding: 28px;

    border-radius: 22px;

    background: #1a2230;

    border: 1px solid #2c384b;
}


/* TOP */

.example-test-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 22px;

    border-bottom: 1px solid #2a3547;
}

.example-test-top span {
    color: #9f91e8;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.example-test-top h4 {
    margin: 8px 0 0;

    color: #e8eaf0;

    font-size: 19px;
}

.example-question-count {
    padding: 9px 12px;

    border-radius: 9px;

    background: #222d3d;

    color: #9aa4b4;

    font-size: 11px;
}


/* QUESTION */

.example-question {
    margin: 28px 0;
}

.question-label {
    color: #8177d6;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.example-question h3 {
    margin: 10px 0 0;

    color: #edf0f5;

    font-size: 21px;

    line-height: 1.5;
}


/* OPTIONS */

.example-options {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}

.example-option {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border-radius: 13px;

    background: #202a39;

    border: 1px solid #2c394c;

    color: #aeb6c4;

    font-size: 13px;
}

.option-letter {
    width: 30px;
    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #293548;

    color: #b7aaff;

    font-size: 11px;

    font-weight: 700;
}

.correct-example {
    border-color: rgba(104, 204, 150, 0.5);

    background: rgba(70, 160, 110, 0.08);
}

.correct-example i {
    margin-left: auto;

    color: #6bd29a;

    font-size: 17px;
}


/* FOOTER */

.example-test-footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid #2a3547;
}

.example-progress {
    display: flex;

    align-items: center;

    gap: 12px;
}

.example-progress span {
    color: #8791a0;

    font-size: 11px;
}

.example-progress-bar {
    width: 130px;

    height: 6px;

    overflow: hidden;

    border-radius: 10px;

    background: #283346;
}

.example-progress-fill {
    width: 10%;

    height: 100%;

    border-radius: 10px;

    background: #7769dc;
}

.example-progress strong {
    color: #abb3c1;

    font-size: 11px;
}


/* BUTTON */

.example-next-btn {
    border: none;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 17px;

    border-radius: 11px;

    background: linear-gradient(135deg,
            #735ce0,
            #5577d9);

    color: white;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================
   RESULT PREVIEW
========================================= */

.example-result-preview {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    margin-top: 25px;

    padding: 25px;

    border-radius: 20px;

    background: linear-gradient(135deg,
            rgba(83, 68, 170, 0.14),
            rgba(37, 67, 130, 0.10));

    border: 1px solid rgba(100, 90, 190, 0.2);
}

.example-result-content {
    max-width: 350px;
}

.example-result-content>span {
    color: #a69aea;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.example-result-content h4 {
    margin: 10px 0 8px;

    color: #eef0f4;

    font-size: 19px;
}

.example-result-content p {
    margin: 0;

    color: #909aaa;

    font-size: 11px;

    line-height: 1.6;
}


/* RESULT ITEMS */

.example-result-items {
    display: flex;

    gap: 12px;
}

.example-result-item {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 150px;

    padding: 14px;

    border-radius: 13px;

    background: #1d2635;

    border: 1px solid #2c384a;
}

.example-result-item i {
    color: #a795ef;

    font-size: 19px;
}

.example-result-item strong {
    display: block;

    color: #e6e8ee;

    font-size: 12px;
}

.example-result-item span {
    display: block;

    margin-top: 4px;

    color: #8d97a5;

    font-size: 9px;
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .example-header,
    .example-result-preview {
        flex-direction: column;

        align-items: flex-start;
    }

    .example-result-items {
        flex-wrap: wrap;

        width: 100%;
    }

    .example-result-item {
        flex: 1;
    }

}


@media (max-width: 600px) {

    .skill-test-example {
        padding: 20px;
    }

    .example-test-card {
        padding: 20px;
    }

    .example-test-top,
    .example-test-footer {
        flex-direction: column;

        align-items: flex-start;
    }

    .example-options {
        grid-template-columns: 1fr;
    }

    .example-progress {
        flex-wrap: wrap;
    }

    .example-result-items {
        flex-direction: column;
    }

    .example-result-item {
        width: 100%;
    }

}

/* =========================================
   LIVE JAVASCRIPT TEST
========================================= */

.live-test-section {
    margin-top: 30px;

}


/* HEADER */

.live-test-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;

    margin: 30px;


}

.live-label {
    color: #a89ae9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}

.live-test-header h2 {
    margin: 5px 0;

    color: #eef0f4;

    font-size: 30px;

    padding: 0px 10px;

    border-bottom: solid 4px #57668c;
}

.live-test-header p {
    margin: 0;

    color: #909aaa;

    font-size: 13px;

    line-height: 1.6;
}


/* SKILL BADGE */

.live-skill-badge {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 20px;

    border-radius: 13px;

    background: rgba(105, 80, 200, 0.14);

    border: 1px solid rgba(130, 110, 230, 0.25);

    color: #b2a4ff;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================
   TEST BOX
========================================= */

.live-test-box {
    margin: 30px;

    padding: 30px;

    border-radius: 24px;

    background: #171f2d;

    border: 1px solid #2c384b;
}


/* TEST INFO */

.live-test-info {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid #2a3547;
}

.live-test-info span {
    color: #a395ed;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.live-test-info h3 {
    margin: 8px 0 0;

    color: #e9ebf0;

    font-size: 20px;
}

.live-question-number {
    padding: 10px 15px;

    border-radius: 10px;

    background: #222d3d;

    color: #929cab;

    font-size: 11px;
}

.live-question-number strong {
    color: #c1b6ff;
}


/* PROGRESS */

.live-progress-container {
    margin-top: 22px;
}

.live-progress-bar {
    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background: #273244;
}

#liveProgress {
    width: 10%;

    height: 100%;

    border-radius: 20px;

    background: linear-gradient(90deg,
            #7059dd,
            #5d7cdc);

    transition: width 0.4s ease;
}


/* QUESTION */

.live-question-area {
    margin: 35px 0 25px;
}

.question-title {
    color: #8377d5;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.live-question-area h3 {
    margin: 10px 0 0;

    color: #edf0f5;

    font-size: 23px;

    line-height: 1.5;
}


/* OPTIONS */

.live-options {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.live-option {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 17px;

    border-radius: 14px;

    background: #202a39;

    border: 1px solid #2d394b;

    color: #b4bdca;

    cursor: pointer;

    transition: 0.25s ease;
}

.live-option:hover {
    transform: translateY(-2px);

    border-color: #6d61cf;
}

.live-option.selected {
    border-color: #8a79f0;

    background: rgba(110, 90, 220, 0.13);
}

.live-option-letter {
    width: 32px;
    height: 32px;

    min-width: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #293548;

    color: #b7aaff;

    font-size: 11px;

    font-weight: 700;
}


/* BOTTOM */

.live-test-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 30px;

    padding-top: 22px;

    border-top: 1px solid #2a3547;
}

#answerMessage {
    color: #8d97a6;

    font-size: 11px;
}

#nextQuestionBtn,
#restartTestBtn {
    border: none;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 13px 18px;

    border-radius: 11px;

    background: linear-gradient(135deg,
            #735ce0,
            #5577d9);

    color: white;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================
   RESULTS
========================================= */

.live-result-box {
    display: none;

    padding: 30px;

    border-radius: 24px;

    background: #171f2d;

    border: 1px solid #2c384b;

    margin: 25px;
}

.result-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 20px;
}

.result-top span {
    color: #a89ae9;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.result-top h3 {
    margin: 8px 0 0;

    color: #eef0f4;

    font-size: 25px;
}


/* SCORE */

.live-score {
    text-align: center;

    margin: 40px 0;
}

.live-score span {
    display: block;

    color: #b5a6ff;

    font-size: 50px;

    font-weight: 800;
}

.live-score p {
    margin: 7px 0 0;

    color: #8e98a7;

    font-size: 12px;
}


/* STATS */

.live-result-stats {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}

.live-stat {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 20px;

    border-radius: 15px;

    background: #202a39;

    border: 1px solid #2d394b;
}

.live-stat i {
    font-size: 25px;

    color: #a897f1;
}

.live-stat strong {
    display: block;

    color: #eef0f4;

    font-size: 18px;
}

.live-stat span {
    display: block;

    margin-top: 4px;

    color: #909aaa;

    font-size: 11px;
}


/* ANSWER REVIEW */

.answer-review {
    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid #2a3547;
}

.answer-review h4 {
    margin-bottom: 18px;

    color: #e9ebf0;
}

.review-item {
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 12px;

    background: rgba(20, 35, 60, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(100, 130, 170, 0.18);
}

.review-item.correct {
    border-left: 3px solid #55b982;
}

.review-item.wrong {
    border-left: 3px solid #d76c7c;
}

.review-question {
    color: #c2c8d2;

    font-size: 12px;

    line-height: 1.5;
}

.review-answer {
    margin-top: 8px;

    color: #8f99a8;

    font-size: 11px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .live-test-header,
    .live-test-info,
    .live-test-bottom,
    .result-top {
        flex-direction: column;

        align-items: flex-start;
    }

    .live-options {
        grid-template-columns: 1fr;
    }

    .live-result-stats {
        grid-template-columns: 1fr;
    }

    .live-test-box,
    .live-result-box {
        padding: 20px;
    }

}

/* =========================================
   PROFILE PAGE
========================================= */

.profile-avatar-circle {

    width: 110px;
    height: 110px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #4f46e5,
            #9333ea);

    color: white;

    font-size: 40px;

    font-weight: 800;

}


.profile-name {

    text-align: center;

    font-size: 20px;

    font-weight: 700;

    color: white;

    margin-bottom: 4px;

}


.profile-email {

    text-align: center;

    color: #8d94a6;

    font-size: 13px;

}


.profile-detail-item {

    margin-bottom: 22px;

}


.profile-detail-item:last-child {

    margin-bottom: 0;

}


.profile-detail-label {

    color: #8d94a6;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 6px;

}


.profile-detail-value {

    color: #e5e7eb;

    font-size: 15px;

}


.profile-stat-card {

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    padding: 22px;

    text-align: center;

}


.profile-stat-number {

    font-size: 26px;

    font-weight: 800;

    color: #a78bfa;

}


.profile-stat-label {

    margin-top: 6px;

    color: #8d94a6;

    font-size: 12px;

}


@media (max-width: 576px) {

    .profile-avatar-circle {

        width: 90px;
        height: 90px;

        font-size: 32px;

    }

}


/* =========================================
   tobeHired PROFILE UPGRADE
========================================= */
.profile-section {
    position: relative;
    overflow: hidden;
}

.profile-hero {
    position: relative;
    overflow: hidden;
    padding: 28px 30px;
}

.profile-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.profile-eyebrow,
.profile-mini-label {
    color: var(--purple-light, #a476ff);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.profile-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
}

.profile-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    filter: blur(55px);
    opacity: .25;
    pointer-events: none;
}

.glow-one {
    right: -60px;
    top: -100px;
    background: #8b6cff;
}

.glow-two {
    left: 25%;
    bottom: -180px;
    background: #3f8cff;
}

.profile-edit-btn,
.profile-save-btn {
    border: 0;
    color: #fff;
    border-radius: 13px;
    padding: 12px 17px;
    background: linear-gradient(135deg, #8d6bff, #5c43d5);
    box-shadow: 0 10px 30px rgba(111, 78, 220, .28);
    transition: .25s ease;
}

.profile-edit-btn:hover,
.profile-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(111, 78, 220, .4);
}

.profile-identity-card,
.profile-details-card,
.profile-progress-card {
    position: relative;
    overflow: hidden;
}

.profile-identity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 32px;
}

.profile-avatar-circle {
    position: relative;
    z-index: 2;
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #8e6dff, #4b35b2);
    color: #fff;
    font-size: 44px;
    font-weight: 700;
    box-shadow: 0 0 0 8px rgba(139, 108, 255, .08), 0 0 55px rgba(139, 108, 255, .34);
}

.profile-avatar-glow::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(180, 157, 255, .35);
    animation: profilePulse 2.8s ease-in-out infinite;
}

@keyframes profilePulse {

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

    50% {
        transform: scale(1.08);
        opacity: .95
    }
}

.profile-orbit {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(157, 128, 255, .12);
    border-radius: 50%;
    animation: profileOrbit 10s linear infinite;
}

.profile-orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 20px;
    left: 35px;
    border-radius: 50%;
    background: #bba7ff;
    box-shadow: 0 0 16px #a98aff;
}

@keyframes profileOrbit {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.profile-name {
    margin-top: 20px;
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-email {
    margin-top: 4px;
    color: var(--text-muted, #98a1b5);
    font-size: .9rem;
}

.profile-status-pill {
    margin-top: 17px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(118, 239, 180, .18);
    border-radius: 999px;
    color: #b8f4d3;
    background: rgba(70, 180, 125, .07);
    font-size: .72rem;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65e7a6;
    box-shadow: 0 0 12px rgba(101, 231, 166, .7);
}

.profile-quick-actions {
    width: 100%;
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.profile-quick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
    color: inherit;
    text-decoration: none;
    font-size: .78rem;
    transition: .2s ease;
}

.profile-quick-btn:hover {
    color: #fff;
    border-color: rgba(154, 126, 255, .35);
    background: rgba(139, 108, 255, .08);
    transform: translateY(-1px);
}

.profile-quick-btn.danger:hover {
    border-color: rgba(255, 102, 130, .3);
    background: rgba(255, 80, 110, .06);
}

.profile-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.profile-heading-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #b9a5ff;
    background: rgba(139, 108, 255, .11);
    border: 1px solid rgba(139, 108, 255, .12);
}

.profile-details-card {
    padding: 28px;
}

.profile-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 19px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.profile-detail-item:last-child {
    border-bottom: 0;
}

.profile-detail-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #b49cff;
    background: rgba(139, 108, 255, .09);
}

.profile-detail-label {
    margin-bottom: 5px;
    color: var(--text-muted, #98a1b5);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.profile-detail-value {
    font-size: .96rem;
    line-height: 1.55;
    word-break: break-word;
}

.profile-bio-value {
    color: #dce0eb;
}

.profile-progress-card {
    padding: 28px;
}

.shiny-stat {
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.shiny-stat::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -45px;
    top: -45px;
    border-radius: 50%;
    background: rgba(150, 120, 255, .14);
    filter: blur(3px);
}

.shiny-stat>i {
    position: relative;
    z-index: 1;
    color: #b59fff;
    font-size: 1.05rem;
}

.shiny-stat .profile-stat-number,
.shiny-stat .profile-stat-label {
    position: relative;
    z-index: 1;
}

.profile-message {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: .83rem;
    border: 1px solid transparent;
}

.profile-message.show {
    display: flex;
    animation: profileMessageIn .25s ease;
}

.profile-message.success {
    color: #c6f8dc;
    background: rgba(68, 190, 127, .08);
    border-color: rgba(68, 190, 127, .2);
}

.profile-message.error {
    color: #ffc5cf;
    background: rgba(255, 78, 110, .08);
    border-color: rgba(255, 78, 110, .2);
}

@keyframes profileMessageIn {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: .25s ease;
}

.profile-modal.show {
    visibility: visible;
    opacity: 1;
}

.profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 15, .72);
    backdrop-filter: blur(12px);
}

.profile-modal-card {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    max-height: 90vh;
    overflow: auto;
    padding: 30px;
    border-radius: 22px;
    border: 1px solid rgba(161, 132, 255, .2);
    background: linear-gradient(145deg, rgba(23, 28, 48, .97), rgba(13, 17, 30, .98));
    box-shadow: 0 35px 90px rgba(0, 0, 0, .55), 0 0 50px rgba(105, 78, 190, .12);
    transform: translateY(18px) scale(.98);
    transition: .28s ease;
}

.profile-modal.show .profile-modal-card {
    transform: none;
}

.profile-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: #b8bfd0;
}

.profile-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.profile-modal-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin-bottom: 16px;
    color: #c1aeff;
    background: rgba(139, 108, 255, .12);
    box-shadow: 0 0 30px rgba(139, 108, 255, .12);
}

.profile-modal-card h4 {
    margin: 6px 0 5px;
    font-size: 1.4rem;
}

.profile-modal-subtitle {
    margin: 0 0 24px;
    color: var(--text-muted, #98a1b5);
    font-size: .82rem;
    line-height: 1.6;
}

.profile-form-group {
    margin-bottom: 18px;
}

.profile-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: .76rem;
    color: #cbd0dc;
}

.profile-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    transition: .2s ease;
}

.profile-input-wrap:focus-within {
    border-color: rgba(145, 116, 255, .55);
    box-shadow: 0 0 0 4px rgba(139, 108, 255, .08);
}

.profile-input-wrap i {
    color: #9d83ff;
}

.profile-input-wrap input,
.profile-input-wrap textarea {
    width: 100%;
    border: 0;
    outline: 0;
    color: #f5f6fb;
    background: transparent;
    padding: 13px 0;
    font: inherit;
    resize: vertical;
}

.profile-textarea-wrap {
    align-items: flex-start;
}

.profile-textarea-wrap i {
    margin-top: 15px;
}

.profile-character-count {
    text-align: right;
    margin-top: 5px;
    color: #6f7890;
    font-size: .68rem;
}

.profile-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

.profile-cancel-btn {
    padding: 11px 17px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: #c4c9d5;
}

.profile-cancel-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.profile-save-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

body.profile-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .profile-hero {
        padding: 22px;
    }

    .profile-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-edit-btn {
        width: 100%;
    }

    .profile-identity-card {
        min-height: 330px;
    }

    .profile-modal-card {
        padding: 25px 20px;
    }
}

/* =========================================
   PREMIUM TOBEHIRED FOOTER
========================================= */
.site-footer {
    position: relative;
    margin-top: 70px;
    padding: 58px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(10, 13, 24, .18), rgba(8, 10, 18, .72));
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 180px;
    left: 10%;
    top: -110px;
    background: rgba(124, 92, 255, .13);
    filter: blur(70px);
    pointer-events: none;
}

.footer-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 42px;
}

.footer-brand {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.footer-brand span {
    color: #8d6bff;
}

.footer-brand-block p {
    max-width: 420px;
    margin: 13px 0 20px;
    color: #8991a5;
    line-height: 1.7;
    font-size: .86rem;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    color: #aeb5c7;
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
    transition: .22s ease;
}

.footer-socials a:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: rgba(141, 107, 255, .45);
    background: rgba(124, 92, 255, .1);
    box-shadow: 0 10px 25px rgba(89, 62, 180, .18);
}

.footer-links-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-links-group h6 {
    margin: 3px 0 8px;
    color: #f2f3f8;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.footer-links-group a,
.footer-links-group button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8991a5;
    text-decoration: none;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: .2s ease;
}

.footer-links-group a:hover,
.footer-links-group button:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-links-group i {
    color: #8d6bff;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #646d81;
    font-size: .72rem;
}

.footer-bottom i {
    color: #8d6bff;
    margin-right: 5px;
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 42px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 34px 25px;
    }

    .footer-brand-block {
        grid-column: 1/-1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand-block {
        grid-column: auto;
    }
}


.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.skills-list span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 20px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}


.test-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.test-skills span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.feedback-section {
    width: min(900px, 90%);
    margin: 80px auto;
}

.feedback-header {
    text-align: center;
    margin-bottom: 35px;
}

.feedback-header h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 10px;
}

.feedback-header p {
    color: #9299ad;
    font-size: 16px;
}

.feedback-form {
    background: #12151c;
    border: 1px solid #292d38;
    border-radius: 20px;
    padding: 35px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.form-group label {
    display: block;
    color: #e8e9ed;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0b0d12;
    color: #ffffff;
    border: 1px solid #303440;
    border-radius: 10px;
    padding: 13px 15px;
    font-size: 15px;
    outline: none;
    transition: 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #7655f5;
    box-shadow: 0 0 0 3px rgba(118, 85, 245, 0.12);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.feedback-submit {
    width: 100%;
    border: none;
    border-radius: 11px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #6d55ff, #9d4edd);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.feedback-submit:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.feedback-status {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}

@media (max-width: 650px) {

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .feedback-form {
        padding: 25px 20px;
    }

    .feedback-header h2 {
        font-size: 26px;
    }
}

#resumeResults.resume-results-hidden {
    display: none;
}

#resumeResults.resume-results-visible {
    display: block !important;
}

#resumeResults[data-analysis-shown="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#resumeResults.resume-results-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#detectedSkills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#detectedSkills span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   RESUME ANALYSIS - FINAL VISIBILITY FIX
========================================================= */

#resumeResults.resume-results-hidden {
    display: none !important;
}

#resumeResults.resume-results-visible,
#resumeResults[data-analysis-shown="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#detectedSkills {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#detectedSkills span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Authentication loading state */
.auth-btn:disabled {
    opacity: .78;
    cursor: wait;
}

.auth-inline-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: authSpin .7s linear infinite;
}

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



.review-question {
    font-weight: 600;
    margin-bottom: 14px;
}

.review-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.review-status.correct {
    color: #15803d;
    background: #dcfce7;
}

.review-status.wrong {
    color: #b91c1c;
    background: #fee2e2;
}

.review-status.unanswered {
    color: #92400e;
    background: #fef3c7;
}

.correct-text {
    color: #15803d;
    font-weight: 600;
}

.wrong-text {
    color: #dc2626;
    font-weight: 600;
}

.unanswered-text {
    color: #92400e;
    font-weight: 600;
}

.review-explanation {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}