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

/* ==========================================
   TABLET (max-width: 1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* Layout */
    .split-layout {
        flex-direction: column;
    }

    /* Sidebar */
    .sidebar-fixed {
        width: 100%;
        position: relative;
        padding: 60px 32px 40px;
        min-height: auto;
        display: flex;
        justify-content: center;
    }

    .sidebar-content {
        max-width: 520px;
        width: 90%;
        margin: 0 auto;
        padding-top: 0;
    }

    /* Profile Card */
    .profile-card {
        max-width: 100%;
        padding: 45px 40px;
        border-radius: 32px;
    }

    .profile-image {
        max-width: 400px;
        height: 400px;
        margin-bottom: 36px;
    }

    .profile-name {
        font-size: 38px;
        margin-bottom: 10px;
    }

    .profile-location {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .profile-bio {
        font-size: 18px;
        line-height: 1.75;
        max-width: 95%;
        margin-bottom: 40px;
    }

    .dotted-path-top {
        top: 16px;
        left: 12px;
        width: 120px;
        height: 120px;
    }

    .dotted-path-bottom {
        bottom: 100px;
        left: -8px;
        width: 110px;
        height: 60px;
    }

    /* Content Area */
    .content-scrollable {
        width: 100%;
        padding: 60px 32px;
        padding-bottom: 0;
    }

    .contact-section {
        margin-bottom: 60px;
    }

    /* Hero Section */
    .hero-heading {
        font-size: 80px;
        letter-spacing: -2px;
    }

    .hero-subtitle {
        font-size: 17px;
        max-width: 100%;
    }

    .hero-stats {
        gap: 14px;
    }

    .stat-card {
        padding: 24px;
        min-height: 180px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-title {
        font-size: 16px;
    }

    .stat-subtitle {
        font-size: 12px;
    }

    .stat-arrow {
        bottom: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
    }

    /* Download Resume Button */
    .download-resume-btn {
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        padding: 13px 22px;
        font-size: 14px;
    }

    /* Section Titles */
    .title-primary,
    .title-secondary {
        font-size: 56px;
    }

    /* Achievement Section */
    .achievement-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .achievement-title {
        font-size: 26px;
    }

    .achievement-subtitle {
        font-size: 15px;
    }

    .achievement-project {
        font-size: 17px;
    }

    .achievement-description {
        font-size: 15px;
    }

    /* Experience Section */
    .experience-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .experience-list {
        gap: 40px;
    }

    .experience-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .company-name {
        font-size: 19px;
    }

    .role-description {
        font-size: 15px;
    }

    .date-range {
        font-size: 13px;
    }

    /* Contact Section */
    .contact-section {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    .contact-form {
        margin-top: 40px;
    }

    /* Footer */
    .page-footer {
        padding: 48px 0 32px 0;
    }

    /* Tools Section */
    .tools-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

/* ==========================================
   MOBILE (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    /* Navigation */
    .floating-nav {
        top: 16px;
    }

    .nav-container {
        padding: 8px 12px;
        gap: 6px;
    }

    .nav-container:hover {
        padding: 8px 12px;
        gap: 6px;
    }

    .nav-label {
        display: none;
    }

    /* Layout */
    .split-layout {
        flex-direction: column;
    }

    /* Sidebar */
    .sidebar-fixed {
        width: 100%;
        position: relative;
        padding: 40px 24px 30px;
        min-height: auto;
    }

    .sidebar-content {
        padding-top: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Profile Card */
    .profile-card {
        max-width: 100%;
        padding: 32px 28px;
        border-radius: 28px;
    }

    .profile-image {
        max-width: 320px;
        height: 320px;
        margin-bottom: 28px;
    }

    .profile-name {
        font-size: 30px;
        margin-bottom: 8px;
    }

    .profile-location {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .profile-bio {
        font-size: 16px;
        line-height: 1.7;
        max-width: 100%;
        margin-bottom: 36px;
    }

    .social-icons {
        gap: 18px;
    }

    .dotted-path-top {
        top: 10px;
        left: 6px;
        width: 90px;
        height: 90px;
    }

    .dotted-path-bottom {
        bottom: 88px;
        left: -4px;
        width: 90px;
        height: 50px;
    }

    /* Content Area */
    .content-scrollable {
        width: 100%;
        padding: 40px 24px;
        padding-bottom: 0;
    }

    .contact-section {
        margin-bottom: 40px;
    }

    /* Footer */
    .page-footer {
        padding: 40px 0 28px 0;
    }

    /* Hero Section */
    .hero-content-section {
        padding-bottom: 60px;
        text-align: center;
        align-items: center;
    }

    .hero-heading {
        font-size: 56px;
        letter-spacing: -1.5px;
    }

    .hero-subtitle {
        font-size: 16px;
        text-align: center;
    }

    .hero-stats {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .stat-card {
        max-width: 100%;
        padding: 24px;
        min-height: 160px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
    }

    .stat-title {
        font-size: 15px;
    }

    .stat-subtitle {
        font-size: 12px;
    }

    /* Download Resume Button */
    .download-resume-btn {
        padding: 20px 20px;
        margin-top: 18px;
    }

    .download-icon {
        width: 40px;
        height: 40px;
    }

    .download-icon svg {
        width: 24px;
        height: 24px;
    }

    .download-content {
        padding: 0 14px;
    }

    .download-text {
        font-size: 15px;
    }

    .download-arrow {
        width: 28px;
        height: 28px;
    }

    .download-arrow svg {
        width: 16px;
        height: 16px;
    }

    /* Timezone Card */
    .timezone-card {
        max-width: 100%;
        padding: 16px 20px;
        margin-top: 24px;
    }

    .timezone-icon {
        width: 36px;
        height: 36px;
    }

    .timezone-text {
        font-size: 13px;
    }

    .stat-arrow {
        bottom: 20px;
        right: 20px;
        width: 28px;
        height: 28px;
    }

    /* Projects Section */
    .projects-content-section {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .title-primary,
    .title-secondary {
        font-size: 42px;
    }

    .project-card {
        grid-template-columns: 100px 1fr auto;
        gap: 16px;
        padding: 16px;
    }

    .project-thumbnail {
        width: 100px;
        height: 75px;
    }

    .project-title {
        font-size: 20px;
    }

    .project-subtitle {
        font-size: 14px;
    }

    /* Achievement Section */
    .achievement-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .achievement-section .section-title {
        text-align: center;
    }

    .achievement-title {
        font-size: 24px;
    }

    .achievement-project {
        font-size: 16px;
    }

    .achievement-description {
        font-size: 15px;
    }

    .achievement-links {
        gap: 14px;
    }

    /* Experience Section */
    .experience-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .experience-section .section-title {
        text-align: center;
    }

    .experience-list {
        gap: 36px;
        margin-top: 36px;
    }

    .experience-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .company-name {
        font-size: 18px;
    }

    .role-description {
        font-size: 15px;
    }

    .date-range {
        font-size: 13px;
    }

    /* Container */
    .container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .profile-card {
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        top: 0;
        background: #FFFFFF;
    }

    .dotted-path-top,
    .dotted-path-bottom {
        display: block;
    }

    .hero-heading {
        font-size: 56px;
    }

    .hero-subtitle {
        font-size: 16px;
        max-width: 100%;
    }

    .metrics-row {
        gap: 24px;
    }

    .metric-item {
        flex-basis: 100%;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
    /* Hero Section */
    .hero-heading {
        font-size: 48px;
    }

    .profile-name {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    /* Section Titles */
    .title-primary,
    .title-secondary {
        font-size: 36px;
    }

    /* Projects */
    .project-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .project-thumbnail {
        width: 100%;
        height: 160px;
    }

    .project-arrow {
        margin: 0 auto;
    }

    /* Experience Section */
    .company-name {
        font-size: 18px;
    }

    .role-description {
        font-size: 14px;
    }

    .experience-list {
        gap: 32px;
    }

    /* Forms */
    .form-submit {
        padding: 14px;
        font-size: 15px;
    }

    /* Footer */
    .page-footer p {
        font-size: 12px;
    }

    /* Tools Section */
    .tools-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .tools-section .section-title {
        text-align: center;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 36px;
    }

    .tool-icon {
        width: 44px;
        height: 44px;
    }

    .tool-name {
        font-size: 15px;
    }

    .tool-desc {
        font-size: 12px;
    }
}