@media (max-width: 640px) {
      .topbar-actions {
        gap: 10px;
        font-size: 13px;
      }

      .topbar-search {
        min-width: 66px;
        height: 30px;
        padding: 0 9px;
        border-radius: 16px;
      }

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

      .register-link {
        width: 68px;
        height: 36px;
      }

      .search-panel {
        inset: 0;
        padding: 106px 10px 20px;
      }

      .search-panel-card {
        width: 100%;
        min-height: 300px;
        padding: 24px 18px 26px;
      }

      .search-panel-head {
        padding: 0 4px 22px 0;
      }

      .search-panel-query {
        font-size: 20px;
      }

      .search-panel-item {
        font-size: 14px;
        line-height: 20px;
      }

      .hero-stage {
        width: calc(100% - 20px);
      }

      .hero-copy {
        padding-right: 6px;
      }

      .hero-title {
        font-size: 54px;
        line-height: 1.08;
      }

      .hero-subtitle {
        font-size: 24px;
        line-height: 1.34;
      }

      .hero-desc {
        font-size: 14px;
        line-height: 1.7;
        margin-left: 0;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
      }

      .btn {
        width: 100%;
      }

      .course-grid {
        width: calc(100% - 20px);
        grid-template-columns: 1fr;
      }

      .course-card,
    .course-card:last-child,
    .course-card:nth-child(2) {
        border-bottom: 1px solid var(--line);
      }

      .course-card + .course-card::before {
        display: none;
      }

      .course-card:last-child {
        border-bottom: 0;
      }

      .onboarding {
        width: calc(100% - 32px);
        padding: 56px 0 100px;
      }

      .onboarding-heading h2 {
        font-size: 30px;
      }

      .steps {
        grid-template-columns: 1fr;
        margin-top: 34px;
        border-radius: 12px;
      }

      .step-card,
    .step-card:nth-child(2),
    .step-card:nth-child(3),
    .step-card:nth-child(4),
    .step-card:nth-child(5),
    .step-card:nth-child(6) {
        height: 250px;
      }

      .starter-guide {
        width: 100%;
      }

      .activity-section {
        padding: 56px 0 64px;
      }

      .learning-section {
        padding: 56px 0;
      }

      .learning-heading h2 {
        font-size: 30px;
        line-height: 38px;
      }

      .learning-heading p {
        font-size: 15px;
        line-height: 22px;
      }

      .learning-tabs {
        gap: 16px;
        overflow-x: auto;
      }

      .learning-courses,
    .learning-featured,
    .learning-cert {
        padding: 18px;
      }

      .learning-table-head {
        margin-top: 12px;
        padding: 0 14px;
      }

      .learning-course-row {
        grid-template-columns: 16px 1fr;
        row-gap: 4px;
        padding: 14px;
      }

      .learning-course-time {
        grid-column: 2;
      }

      .learning-more,
    .learning-resource-more {
        margin-left: 0;
      }

      .learning-resource {
        grid-template-columns: 86px 1fr;
      }

      .learning-resource-thumb {
        width: 86px;
        height: 86px;
      }

      .learning-resource a {
        margin-left: 0;
      }

      .learning-cert-head {
        display: block;
      }

      .learning-cert-head p,
    .learning-cert-more {
        margin: 8px 0 0;
      }

      .activity-heading {
        display: block;
      }

      .activity-heading h2 {
        font-size: 30px;
      }

      .activity-heading .activity-more {
        margin-top: 12px;
      }

      .activity-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
      }

      .activity-cover {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 190px;
      }

      .activity-card-body {
        max-width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 8px 6px 6px;
      }

      .activity-card-footer {
        margin-top: 24px;
      }

      .activity-banner {
        height: 120px;
        padding: 0 22px;
      }

      .footer-stage {
        width: calc(100% - 32px);
        padding: 40px 0 24px;
      }

      .footer-columns {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
      }

      .footer-brand-desc {
        width: 100%;
      }

      .footer-socials {
        margin-top: 48px;
      }

      .footer-bottom-links {
        flex-wrap: wrap;
        white-space: normal;
      }
    }
    @media (max-width: 760px) {
      html,
    body {
        width: 100%;
        overflow-x: hidden;
      }

      .page {
        overflow-x: hidden;
      }

      .topbar {
        position: sticky;
        top: 0;
        left: 0;
        right: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        width: 100vw;
        max-width: 100vw;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(227, 233, 241, 0.76);
        box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .brand {
        min-width: 0;
      }

      .brand-image {
        width: 163px;
        height: 26px;
      }

      .nav-links {
        order: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        justify-self: start;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        padding: 0;
        overflow: visible !important;
        box-sizing: border-box;
      }

      .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0 4px;
        border-radius: 999px;
        background: #f6f7fb;
        font-size: 12px;
        white-space: nowrap;
      }

      .topbar-actions {
        order: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 13px;
      }

      .topbar-search {
        min-width: 76px;
        background: #f6f7fb;
      }

      .register-link {
        width: 68px;
        height: 34px;
      }

      .hero {
        height: auto;
        min-height: 0;
        padding: 0 0 24px;
        overflow: hidden;
      }

      .hero-bg-canvas {
        top: 118px;
        height: 520px;
        opacity: 0.72;
        pointer-events: none;
      }

      .hero-ribbon,
    .hero-liquid-ribbon {
        left: 50%;
        width: 820px;
        max-width: none;
        transform: translateX(-46%);
      }

      .hero-stage {
        width: min(calc(100vw - 28px), 560px);
        max-width: calc(100vw - 28px);
        height: auto;
        min-height: 0;
        padding-top: 18px;
        margin-top: 0;
      }

      .hero-grid {
        height: auto;
        min-height: 0;
        padding-top: 0;
      }

      .hero-copy {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow: visible;
      }

      .eyebrow {
        margin-top: 0;
        font-size: 14px;
      }

      .hero-title {
        max-width: 100%;
        margin: 12px 0 10px;
        font-size: clamp(42px, 15vw, 56px);
        line-height: 1.02;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .hero-highlight {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        margin-top: 8px;
      }

      .hero-squares {
        margin-top: 7px;
      }

      .hero-subtitle {
        max-width: 100%;
        margin: 0;
        font-size: clamp(22px, 6.4vw, 26px);
        line-height: 1.22;
        white-space: normal;
        overflow-wrap: break-word;
      }

      .hero-subtitle span {
        display: block;
      }

      .hero-desc {
        max-width: 100%;
        margin: 18px 0 0;
        font-size: 14px;
        line-height: 1.75;
        white-space: normal;
        overflow-wrap: break-word;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 26px;
      }

      .btn {
        width: 100%;
        min-height: 44px;
      }

      .hero-visual-layer {
        position: relative;
        height: 260px;
        margin-top: 8px;
        overflow: hidden;
      }

      .hero-visual-motion {
        position: absolute;
        inset: 0;
        transform: translateX(-8%);
      }

      .hero-overlay {
        width: 760px;
        max-width: none;
        opacity: 0.88;
      }

      .course-strip {
        position: relative;
        height: auto;
        margin: 0;
        padding: 18px 14px;
        background: linear-gradient(180deg, rgba(238, 252, 255, 0.9), #fff);
        box-shadow: none;
      }

      .course-strip::before {
        display: none;
      }

      .course-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .course-card,
    .course-card:last-child,
    .course-card:nth-child(2) {
        height: auto;
        min-height: 0;
        border: 1px solid rgba(17, 18, 24, 0.08);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.86);
      }

      .course-card-inner {
        padding: 18px;
      }

      .course-title {
        margin-top: 10px;
      }

      .course-desc {
        min-height: 0;
      }

      .course-card + .course-card::before {
        display: none;
      }

      .onboarding {
        width: min(100% - 28px, 560px);
        padding: 48px 0 64px;
      }

      .onboarding-kicker {
        max-width: 100%;
      }

      .onboarding-heading h2 {
        font-size: clamp(30px, 9vw, 40px);
        line-height: 1.16;
      }

      .onboarding-heading p {
        font-size: 15px;
        line-height: 1.7;
      }

      .steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 28px;
        background: transparent;
        overflow: visible;
      }

      .step-card,
    .step-card:nth-child(2),
    .step-card:nth-child(3),
    .step-card:nth-child(4),
    .step-card:nth-child(5),
    .step-card:nth-child(6) {
        height: auto;
        min-height: 228px;
        border: 1px solid rgba(17, 18, 24, 0.08);
        border-radius: 14px;
      }

      .step-card h3 {
        font-size: 18px;
        line-height: 1.35;
      }

      .starter-guides {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
      }

      .starter-guide {
        min-height: 0;
        padding: 24px 22px;
      }

      .starter-guide-art {
        position: static;
        display: block;
        width: min(180px, 58vw);
        margin: 18px 0 0 auto;
      }
    }

    @media (max-width: 520px) {
      .topbar {
        width: 100%;
        max-width: 100%;
      }

      .nav-links {
        width: min(calc(100vw - 32px), 358px);
        max-width: min(calc(100vw - 32px), 358px);
      }

      .hero-stage,
    .onboarding {
        width: min(calc(100vw - 28px), 362px);
        max-width: min(calc(100vw - 28px), 362px);
        margin-left: 14px;
        margin-right: auto;
      }

      .hero-actions {
        max-width: 100%;
      }

      .btn {
        max-width: 100%;
      }
    }