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


:root {

    --green: #22c55e;
    --green-dark: #16a34a;

    --blue: #3b82f6;
    --purple: #8b5cf6;
    --orange: #f59e0b;

    --dark: #111827;
    --text: #1f2937;
    --gray: #6b7280;

    --background: #f7faf9;

    --white: #ffffff;

    --border: #e5e7eb;

}


body {

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(180deg,
            #f0fdf4 0%,
            #f8fafc 35%,
            #ffffff 100%);

    color: var(--text);

    min-height: 100vh;

}


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

.header {

    height: 72px;

    background: rgba(17, 24, 39, .97);

    color: white;

    padding: 0 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.brand-logo {

    width: 44px;

    height: 44px;

    background:
        linear-gradient(135deg,
            #22c55e,
            #16a34a);

    border-radius: 13px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 25px;

    box-shadow:
        0 5px 15px rgba(34, 197, 94, .25);

}


.brand h1 {

    font-size: 20px;

}


.brand p {

    font-size: 11px;

    color: #9ca3af;

    margin-top: 3px;

}


.header-right {

    display: flex;

    align-items: center;

    gap: 18px;

}


.streak {

    background: #1f2937;

    padding: 7px 12px;

    border-radius: 20px;

    font-size: 12px;

}


.status {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: #bbf7d0;

}


.status span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

}


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

.container {

    width: 92%;

    max-width: 1100px;

    margin: auto;

}


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

.hero {

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.hero-content {

    max-width: 650px;

}


.hero-badge {

    display: inline-block;

    background: #dcfce7;

    color: #15803d;

    padding: 8px 13px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: bold;

    margin-bottom: 18px;

}


.hero h2 {

    font-size: clamp(35px,
            5vw,
            58px);

    line-height: 1.05;

    color: var(--dark);

}


.hero h2 span {

    color: var(--green-dark);

}


.hero-content>p {

    margin-top: 20px;

    color: var(--gray);

    font-size: 17px;

    line-height: 1.7;

    max-width: 600px;

}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin-top: 25px;

}


.primary-btn,
.secondary-btn {

    border: none;

    border-radius: 10px;

    padding: 13px 20px;

    font-weight: bold;

    cursor: pointer;

    transition: .2s;

}


.primary-btn {

    background: var(--green);

    color: white;

    box-shadow:
        0 8px 20px rgba(34, 197, 94, .2);

}


.primary-btn:hover {

    background: var(--green-dark);

    transform: translateY(-2px);

}


.secondary-btn {

    background: white;

    color: var(--text);

    border: 1px solid var(--border);

}


.secondary-btn:hover {

    border-color: var(--green);

}


/* ================= CHARACTER ================= */

.hero-character {

    position: relative;

    width: 280px;

    height: 280px;

}


.character-circle {

    width: 210px;

    height: 210px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #dcfce7,
            #bbf7d0);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 105px;

    box-shadow:
        0 25px 50px rgba(34, 197, 94, .16);

}


.floating-card {

    position: absolute;

    background: white;

    padding: 10px 14px;

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .1);

    font-size: 12px;

    font-weight: bold;

}


.card-one {

    top: 15px;

    right: 0;

}


.card-two {

    bottom: 45px;

    right: -10px;

}


.card-three {

    bottom: 0;

    left: 15px;

}


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

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;

}


.eyebrow {

    color: var(--green-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 6px;

}


.section-heading h3 {

    font-size: 24px;

    color: var(--dark);

}


.level {

    background: #f0fdf4;

    color: #15803d;

    padding: 8px 12px;

    border-radius: 20px;

    font-size: 12px;

}


/* ================= LEARNING CARDS ================= */

.learning-grid {

    display: grid;

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

    gap: 12px;

}


.learning-card {

    border: 1px solid var(--border);

    background: white;

    padding: 18px;

    border-radius: 15px;

    text-align: left;

    cursor: pointer;

    transition: .25s;

}


.learning-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .07);

}


.card-icon {

    width: 45px;

    height: 45px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 23px;

    margin-bottom: 15px;

}


.explain-card .card-icon {

    background: #fef3c7;

}


.troubleshoot-card .card-icon {

    background: #fee2e2;

}


.lab-card .card-icon {

    background: #dbeafe;

}


.interview-card .card-icon {

    background: #ede9fe;

}


.card-content h4 {

    color: var(--dark);

    font-size: 15px;

    margin-bottom: 7px;

}


.card-content p {

    color: var(--gray);

    font-size: 12px;

    line-height: 1.5;

    min-height: 38px;

}


.card-content span {

    display: block;

    margin-top: 13px;

    color: var(--green-dark);

    font-size: 12px;

    font-weight: bold;

}


/* ================= PROGRESS ================= */

.progress-section {

    background:
        linear-gradient(135deg,
            #111827,
            #1f2937);

    color: white;

    border-radius: 18px;

    margin: 35px 0;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.progress-left {

    display: flex;

    align-items: center;

    gap: 15px;

}


.progress-icon {

    width: 55px;

    height: 55px;

    background: #1f2937;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

}


.progress-left .eyebrow {

    color: #86efac;

}


.progress-left h3 {

    margin-bottom: 5px;

}


.progress-left p:last-child {

    color: #9ca3af;

    font-size: 12px;

}


.progress-right {

    width: 360px;

}


.progress-label {

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    margin-bottom: 7px;

}


.progress-bar {

    height: 8px;

    background: #374151;

    border-radius: 10px;

    overflow: hidden;

}


.progress-bar div {

    height: 100%;

    background: var(--green);

    border-radius: 10px;

}


.progress-stats {

    display: flex;

    justify-content: space-between;

    color: #9ca3af;

    font-size: 10px;

    margin-top: 10px;

}


/* ================= ASSISTANT ================= */

.assistant-section {

    margin-top: 45px;

}


.assistant-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

}


.assistant-heading h3 {

    font-size: 28px;

    color: var(--dark);

}


.assistant-heading p:last-child {

    color: var(--gray);

    font-size: 13px;

    margin-top: 5px;

}


.buddy-small {

    width: 55px;

    height: 55px;

    background: #dcfce7;

    border-radius: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

}


/* ================= CHAT ================= */

.chat-box {

    background: white;

    border: 1px solid var(--border);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .06);

}


.chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 18px;

    border-bottom: 1px solid var(--border);

}


.chat-buddy {

    display: flex;

    align-items: center;

    gap: 10px;

}


.mini-logo {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    background: #dcfce7;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

}


.chat-buddy strong {

    display: block;

    font-size: 14px;

}


.chat-buddy small {

    color: var(--gray);

    font-size: 10px;

}


.clear-button {

    border: none;

    background: none;

    color: var(--gray);

    cursor: pointer;

    font-size: 11px;

}


.current-mode {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #f0fdf4;

    padding: 10px 18px;

}


.current-mode>span {

    font-size: 20px;

}


.current-mode strong {

    display: block;

    font-size: 12px;

}


.current-mode small {

    color: var(--gray);

    font-size: 10px;

}


/* ================= MESSAGES ================= */

.messages {

    height: 420px;

    overflow-y: auto;

    padding: 20px;

    background: #fafafa;

}


.message {

    display: flex;

    margin-bottom: 16px;

}


.message.user {

    justify-content: flex-end;

}


.message-content {

    max-width: 75%;

    padding: 13px 15px;

    border-radius: 14px;

    white-space: pre-wrap;

    line-height: 1.65;

    font-size: 13px;

}


.message.bot .message-content {

    background: #e9eef2;

    border-bottom-left-radius: 4px;

}


.message.user .message-content {

    background: var(--green);

    color: white;

    border-bottom-right-radius: 4px;

}


/* ================= SUGGESTIONS ================= */

.suggestions {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    padding: 0 18px 12px;

    background: #fafafa;

}


.suggestion {

    border: 1px solid var(--border);

    background: white;

    border-radius: 20px;

    padding: 7px 11px;

    font-size: 11px;

    cursor: pointer;

}


.suggestion:hover {

    border-color: var(--green);

    color: var(--green-dark);

}


/* ================= INPUT ================= */

.input-area {

    display: flex;

    gap: 10px;

    padding: 14px;

    border-top: 1px solid var(--border);

}


.input-area input {

    flex: 1;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    padding: 13px;

    outline: none;

}


.input-area input:focus {

    border-color: var(--green);

    box-shadow:
        0 0 0 3px #dcfce7;

}


.input-area button {

    background: var(--green);

    color: white;

    border: none;

    padding: 0 20px;

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;

}


.input-area button:hover {

    background: var(--green-dark);

}


/* ================= POPULAR ================= */

.popular {

    padding: 50px 0;

}


.topic-grid {

    display: grid;

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

    gap: 10px;

}


.topic-grid button {

    background: white;

    border: 1px solid var(--border);

    border-radius: 13px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    cursor: pointer;

    transition: .2s;

}


.topic-grid button:hover {

    border-color: var(--green);

    transform:
        translateY(-2px);

}


.topic-grid button>span {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f3f4f6;

    border-radius: 10px;

    font-size: 19px;

}


.topic-grid strong {

    display: block;

    color: var(--dark);

    font-size: 13px;

}


.topic-grid small {

    display: block;

    color: var(--gray);

    font-size: 10px;

    margin-top: 3px;

}


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

footer {

    background: var(--dark);

    color: #9ca3af;

    text-align: center;

    padding: 30px;

}


.footer-logo {

    color: white;

    font-weight: bold;

    margin-bottom: 7px;

}


footer p {

    font-size: 12px;

}


footer small {

    display: block;

    margin-top: 8px;

    color: #6b7280;

}


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

@media(max-width: 850px) {

    .hero {

        flex-direction: column;

        text-align: center;

        padding-top: 50px;

    }


    .hero-content {

        max-width: 700px;

    }


    .hero-character {

        height: 220px;

    }


    .learning-grid {

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

    }


    .progress-section {

        flex-direction: column;

        align-items: stretch;

    }


    .progress-right {

        width: 100%;

    }


    .topic-grid {

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

    }

}


@media(max-width: 550px) {

    .header {

        padding: 0 16px;

    }


    .header-right {

        display: none;

    }


    .hero h2 {

        font-size: 38px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .hero-character {

        transform: scale(.85);

        margin-top: -20px;

    }


    .learning-grid {

        grid-template-columns: 1fr;

    }


    .topic-grid {

        grid-template-columns: 1fr;

    }


    .section-heading {

        align-items: flex-start;

        gap: 10px;

        flex-direction: column;

    }


    .messages {

        height: 390px;

        padding: 15px;

    }


    .message-content {

        max-width: 90%;

    }


    .input-area button {

        padding: 0 14px;

    }

}