/* Show More Projects functionality */
    .show-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 32px;
      padding-bottom: 0;
      width: 100%;
    }

    .btn-show-more {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      color: var(--muted2);
      padding: 14px 38px;
      border-radius: 999px;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      gap: 12px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .btn-show-more svg {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      color: var(--cyan);
    }

    .btn-show-more:hover {
      background: var(--themeToggleBgHover);
      border-color: rgba(0, 229, 255, 0.4);
      color: var(--text);
      transform: translateY(-3px);
      box-shadow: 0 15px 30px rgba(0, 229, 255, 0.08);
    }

    .btn-show-more:hover svg {
      transform: translateY(2px);
    }

    .btn-show-more.is-expanded svg {
      transform: rotate(180deg);
    }

    .btn-show-more.is-expanded:hover svg {
      transform: rotate(180deg) translateY(-2px);
    }

    /* ═══════════════════════════════════════════════════════════════
       PROJECTS SECTION: "VIEW ALL PROJECTS" CYBER CALLOUT BANNER
       ═══════════════════════════════════════════════════════════════ */
    .projects-archive-banner-wrap {
      margin-top: 14px;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }

    .projects-archive-banner {
      position: relative;
      border-radius: 14px;
      padding: 1.5px;
      background: var(--banner-border-grad, linear-gradient(135deg, rgba(94, 201, 247, 0.95) 0%, rgba(93, 200, 246, 0.5) 25%, rgba(6, 182, 212, 0.45) 70%, rgba(6, 182, 212, 0.95) 100%));
      clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
      );
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(6, 182, 212, 0.12);
    }

    .projects-archive-banner:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(6, 182, 212, 0.25);
    }

    .projects-archive-banner-inner {
      clip-path: polygon(
        17px 0,
        calc(100% - 17px) 0,
        100% 17px,
        100% calc(100% - 17px),
        calc(100% - 17px) 100%,
        17px 100%,
        0 calc(100% - 17px),
        0 17px
      );
      background:
        radial-gradient(circle at 8% 50%, rgba(94, 201, 247, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 92% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        rgba(8, 12, 20, 0.96);
      padding: 24px 34px;
      display: flex;
      align-items: center;
      gap: 26px;
      box-sizing: border-box;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    /* Outer floating corner brackets */
    .banner-bracket {
      position: absolute;
      width: 14px;
      height: 14px;
      pointer-events: none;
      z-index: 3;
    }

    .banner-bracket.tl {
      top: -4px;
      left: -4px;
      border-top: 1.5px solid rgba(94, 201, 247, 0.8);
      border-left: 1.5px solid rgba(94, 201, 247, 0.8);
    }

    .banner-bracket.tr {
      top: -4px;
      right: -4px;
      border-top: 1.5px solid rgba(6, 182, 212, 0.8);
      border-right: 1.5px solid rgba(6, 182, 212, 0.8);
    }

    .banner-bracket.bl {
      bottom: -4px;
      left: -4px;
      border-bottom: 1.5px solid rgba(94, 201, 247, 0.8);
      border-left: 1.5px solid rgba(94, 201, 247, 0.8);
    }

    .banner-bracket.br {
      bottom: -4px;
      right: -4px;
      border-bottom: 1.5px solid rgba(6, 182, 212, 0.8);
      border-right: 1.5px solid rgba(6, 182, 212, 0.8);
    }

    /* Left Icon Column */
    .banner-icon-col {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.4));
    }

    .banner-folder-icon {
      display: block;
    }

    /* Vertical Divider */
    .banner-divider {
      width: 1px;
      height: 48px;
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16) 20%, rgba(255, 255, 255, 0.16) 80%, transparent);
      flex-shrink: 0;
    }

    /* Middle Text Column */
    .banner-text-col {
      flex: 1;
      min-width: 0;
    }

    .banner-title {
      font-family: var(--font-body);
      font-size: 1.16rem;
      font-weight: 700;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      animation: none !important;
      text-shadow: none !important;
      margin: 0 0 4px;
      line-height: 1.3;
      letter-spacing: var(--heading-tracking);
    }

    .banner-desc {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: #94a3b8;
      line-height: 1.45;
      margin: 0;
    }

    /* Right Action Column */
    .banner-action-col {
      flex-shrink: 0;
    }

    .banner-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 11px 24px;
      border-radius: 8px;
      border: 1.5px solid rgba(6, 182, 212, 0.85);
      background: rgba(6, 182, 212, 0.05);
      color: #ffffff !important;
      font-family: var(--font-body);
      font-size: 0.92rem;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 0 14px rgba(6, 182, 212, 0.2);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }

    .banner-cta-btn svg {
      color: #22d3ee;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .banner-cta-btn:hover {
      background: rgba(6, 182, 212, 0.16);
      border-color: #22d3ee;
      box-shadow: 0 0 24px rgba(6, 182, 212, 0.5), inset 0 0 10px rgba(6, 182, 212, 0.25);
      transform: translateY(-1px);
    }

    .banner-cta-btn:hover svg {
      transform: translateX(4px);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .projects-archive-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 22px 20px;
      }
      .banner-divider {
        display: none;
      }
      .banner-action-col {
        width: 100%;
      }
      .banner-cta-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* Light Theme Support */
    html[data-theme="light"] .projects-archive-banner {
      --banner-border-grad: linear-gradient(135deg, rgba(89, 190, 234, 0.6) 0%, rgba(8, 145, 178, 0.6) 100%);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }

    html[data-theme="light"] .projects-archive-banner-inner {
      background: #ffffff;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }

    html[data-theme="light"] .banner-title {
      color: #0f172a;
    }

    html[data-theme="light"] .banner-desc {
      color: #475569;
    }

    html[data-theme="light"] .banner-divider {
      background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.3) 20%, rgba(148, 163, 184, 0.3) 80%, transparent);
    }

    html[data-theme="light"] .banner-cta-btn {
      border-color: #0891b2;
      color: #0891b2 !important;
      background: rgba(8, 145, 178, 0.06);
      box-shadow: 0 0 10px rgba(8, 145, 178, 0.12);
    }

    html[data-theme="light"] .banner-cta-btn svg {
      color: #0891b2;
    }

    html[data-theme="light"] .banner-cta-btn:hover {
      background: rgba(8, 145, 178, 0.15);
      border-color: #0e7490;
    }

    .hidden-project {
      display: none !important;
    }

    .hidden-cert {
      display: none !important;
    }

    .hidden-exp:not(.is-visible) {
      display: none !important;
    }

    .project-count-badge {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--cyan);
      background: rgba(0, 229, 255, 0.08);
      border: 1px solid rgba(0, 229, 255, 0.25);
      padding: 6px 14px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    @keyframes fadeInExp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 100%;
      transform-origin: 0 50%;
      transform: scaleX(0);
      background: linear-gradient(90deg, var(--cyan), var(--steel-blue), var(--pink));
      z-index: 9999;
      will-change: transform;
    }

    @supports (animation-timeline: scroll()) {
      #bar {
        animation: scrollProgress linear;
        animation-timeline: scroll();
      }

      @keyframes scrollProgress {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
    }
    .proj-bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      align-items: start;
    }

    .proj-card {
      grid-column: 1/-1;
      background: var(--cardGrad);
      border: none;
      border-radius: 20px;
      padding: 32px 28px 28px;
      position: relative;
      overflow: visible;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      border: 1px solid transparent;
      transition: all .45s cubic-bezier(.16, 1, .3, 1);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    }

    .proj-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
      border-radius: inherit;
      z-index: 1;
    }

    .proj-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--projCardAfterLine), transparent);
      opacity: 0;
      transition: opacity .35s ease;
      border-radius: inherit;
    }

    .proj-vid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.16;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 0;
      border-radius: inherit;
      filter: saturate(0.95) contrast(1.04);
    }

    .proj-card:hover .proj-vid {
      opacity: 0.28;
    }

    .parking-media-stack {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .parking-media-stack img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
    }

    .parking-media-stack .parking-primary {
      opacity: 0.84;
    }

    .parking-media-stack .parking-secondary {
      inset: auto 18px 18px auto;
      width: 42%;
      height: 42%;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
      opacity: 0.96;
      transform: rotate(-2deg);
      object-fit: cover;
    }

    .proj-card:hover .parking-media-stack .parking-secondary {
      transform: translateY(-2px) rotate(0deg) scale(1.03);
      opacity: 1;
    }

    .proj-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 48px rgba(0, 0, 0, .38);
    }

    .proj-card:hover::before {
      opacity: 1;
    }

    .proj-card:hover::after {
      opacity: 1;
    }

    .pcc::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(0, 229, 255, .12), transparent 55%);
    }

    .pcc:hover {
      border-color: rgba(0, 229, 255, .35);
    }

    .premium-glow-card::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%,
          rgba(0, 229, 255, .15) 0%,
          rgba(94, 201, 247, .12) 40%,
          rgba(244, 114, 182, .1) 80%,
          transparent 100%) !important;
      opacity: 0.8 !important;
      transition: opacity 1s ease-in-out, background .3s;
    }

    .premium-glow-card:hover::before {
      opacity: 1 !important;
      filter: brightness(1.2);
    }

    .premium-glow-card {
      border-color: rgba(94, 201, 247, .25) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    }

    .premium-glow-card:hover {
      border-color: rgba(94, 201, 247, .45) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, .45), 0 0 20px rgba(0, 229, 255, 0.15);
    }

    #aiemployee-card .pill {
      font-size: 0.78rem;
    }

    .pcp::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(94, 201, 247, .12), transparent 55%);
    }

    .pcp:hover {
      border-color: rgba(94, 201, 247, .35);
    }

    .pca::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(251, 191, 36, .1), transparent 55%);
    }

    .pca:hover {
      border-color: rgba(251, 191, 36, .35);
    }

    .pnum {
      font-family: var(--font-body);
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .22em;
      color: rgba(136, 136, 170, .55);
      margin-bottom: 18px;
    }

    .ptg-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .ptg {
      display: inline-block;
      padding: 4px 10px;
      font-size: .58rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      border-radius: 4px;
      border: 1px solid;
      font-weight: 700;
      white-space: nowrap;
    }

    .pfeat {
      font-size: .52rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--amber);
      background: rgba(251, 191, 36, .08);
      white-space: nowrap;
    }

    .tc {
      background: rgba(0, 229, 255, .09);
      border-color: rgba(0, 229, 255, .28);
      color: var(--cyan);
    }

    .tpp {
      background: rgba(94, 201, 247, .09);
      border-color: rgba(94, 201, 247, .28);
      color: var(--steel-blue);
    }

    .tpk {
      background: rgba(244, 114, 182, .09);
      border-color: rgba(244, 114, 182, .28);
      color: var(--pink);
    }

    .ta {
      background: rgba(251, 191, 36, .09);
      border-color: rgba(251, 191, 36, .28);
      color: var(--amber);
    }

    .tg {
      background: rgba(52, 211, 153, .09);
      border-color: rgba(52, 211, 153, .28);
      color: var(--green);
    }

    .pnm {
      font-family: var(--font-display);
      font-size: clamp(1.05rem, 2.1vw, 1.2rem);
      font-weight: 700;
      letter-spacing: var(--heading-tracking);
      margin-bottom: 0;
      line-height: 1.2;
      flex: 0 0 auto;
    }

    .pdsc {
      color: var(--muted2);
      font-size: 0.88rem;
      line-height: 1.75;
      margin-bottom: 0;
      flex: 1 1 auto;
      text-align: justify;
    }

    .pstk {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
      justify-content: center;
      width: 100%;
    }

    .pill {
      padding: 4px 10px;
      background: rgba(255, 255, 255, .035);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 100px;
      font-size: .62rem;
      color: var(--muted2);
      font-weight: 500;
      transition: border-color .2s, color .2s;
    }

    .proj-card:hover .pill {
      border-color: rgba(255, 255, 255, .12);
      color: var(--muted2);
    }

    .parr {
      position: absolute;
      top: 22px;
      right: 22px;
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .75rem;
      color: var(--muted2);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .25s, border-color .25s, color .25s;
    }

    .proj-card:hover .parr {
      transform: translate(2px, -2px);
    }

    .pcc:hover .parr {
      background: rgba(0, 229, 255, .15);
      color: var(--cyan);
      border-color: rgba(0, 229, 255, .4);
    }

    .pcp:hover .parr {
      background: rgba(94, 201, 247, .15);
      color: var(--steel-blue);
      border-color: rgba(94, 201, 247, .4);
    }

    .proj-card-featured {
      grid-column: 1 / -1 !important;
      display: flex !important;
      flex-direction: row !important;
      padding: 0 !important;
      min-height: 286px !important;
      overflow: visible !important;
      border: 1px solid transparent !important;
    }

    .proj-card-preview {
      grid-column: span 6 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 14px !important;
      min-height: 0 !important;
      overflow: visible !important;
      border: 1px solid transparent !important;
      cursor: pointer;
      align-self: stretch;
    }

    @media (max-width: 992px) {

      .proj-card-featured,
      .proj-card-preview {
        flex-direction: column !important;
        height: auto !important;
      }

      .p-visual {
        min-height: 240px;
      }

      .p-title-large {
        white-space: normal;
        word-break: break-word;
      }

      .p-actions-row {
        flex-wrap: wrap;
        gap: 12px;
      }
    }


    .p-visual {
      flex: 1.25;
      position: relative;
      background: #000;
      overflow: visible;
      min-height: 314px;
    }

    .proj-card-preview .p-visual {
      flex: 0 0 auto !important;
      height: 240px;
      min-height: 240px;
      border-radius: 16px;
      overflow: hidden;
    }

    .proj-card-preview .p-info {
      flex: 0 0 auto !important;
      width: 100%;
      padding: 12px 6px 0;
      box-sizing: border-box;
      min-width: 0;
      overflow: hidden;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
      gap: 0;
      background: transparent;
    }

    .proj-card-preview .p-tags-top {
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .proj-card-preview .p-title-large {
      font-size: clamp(1.45rem, 2.4vw, 2rem);
      line-height: 1.2;
      letter-spacing: var(--heading-tracking);
      text-align: left;
      transition: color 0.3s ease;
    }

    .pcc.proj-card-preview:hover .p-title-large {
      color: var(--cyan);
    }

    .pcc.proj-card-featured:hover .p-title-large {
      color: var(--cyan);
    }

    .pca.proj-card-preview:hover .p-title-large {
      color: var(--amber);
    }

    .pcp.proj-card-preview:hover .p-title-large {
      color: var(--steel-blue);
    }

    .proj-card-trio.pcc:hover .p-title-large {
      color: var(--cyan) !important;
    }

    .proj-card-trio.pcp:hover .p-title-large {
      color: var(--steel-blue) !important;
    }

    .proj-card-trio.pca:hover .p-title-large {
      color: var(--amber) !important;
    }

    .proj-card-preview .p-desc-large {
      font-size: 0.96rem;
      text-align: left;
      max-width: none;
      line-height: 1.55;
      display: block;
      -webkit-line-clamp: unset;
      line-clamp: unset;
      -webkit-box-orient: unset;
      overflow: visible;
      flex: 1 1 auto;
      margin-bottom: 12px;
    }

    .proj-card-preview .pstk {
      justify-content: flex-start;
      margin-top: auto;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .proj-card-preview .pill {
      padding: 6px 12px;
      font-size: 0.72rem;
    }

    .proj-card-preview .github-icon-btn {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      margin-left: auto;
    }

    .proj-card-preview .preview-hover-btn,
    .proj-card-trio .preview-hover-btn,
    .proj-card-featured .preview-hover-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.96);
      padding: 12px 20px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(18, 22, 39, 0.72);
      color: #fff;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 10;
      pointer-events: none;
    }

    .proj-card-preview:hover .preview-hover-btn,
    .proj-card-trio:hover .preview-hover-btn,
    .proj-card-featured:hover .preview-hover-btn,
    .proj-card-preview .p-visual:hover .preview-hover-btn,
    .proj-card-trio .p-visual:hover .preview-hover-btn,
    .proj-card-featured .p-visual:hover .preview-hover-btn {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .proj-card-preview .preview-hover-btn:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }

    .proj-card-preview .badge-year {
      top: 16px;
      right: 16px;
      left: auto;
      bottom: auto;
      font-size: 0.9rem;
      padding: 6px 12px;
    }

    .proj-card-preview .image-label {
      position: absolute;
      top: 14px;
      left: 14px;
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.32);
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 6px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 2;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    .proj-card-preview .image-label.cyan {
      background: rgba(0, 229, 255, 0.2);
      color: #00e5ff;
      border: 1px solid rgba(0, 229, 255, 0.35);
    }

    .proj-card-preview .image-label.agentic {
      background: rgba(94, 201, 247, 0.2);
      color: #5ba9d6;
      border: 1px solid rgba(94, 201, 247, 0.35);
    }

    .proj-card-preview .image-label.pink {
      background: rgba(244, 114, 182, 0.2);
      color: #f472b6;
      border: 1px solid rgba(244, 114, 182, 0.35);
    }

    .proj-card-preview .image-label.amber {
      background: rgba(251, 191, 36, 0.2);
      color: var(--amber);
      border: 1px solid rgba(251, 191, 36, 0.35);
    }

    .proj-card-preview .pill.pill-cyan {
      background: rgba(0, 229, 255, 0.12);
      color: #00e5ff;
      border: 1px solid rgba(0, 229, 255, 0.25);
    }

    .proj-card-preview .pill.pill-purple {
      background: rgba(94, 201, 247, 0.12);
      color: #5ba9d6;
      border: 1px solid rgba(94, 201, 247, 0.25);
    }

    .proj-card-preview .pill.pill-pink {
      background: rgba(244, 114, 182, 0.12);
      color: #f472b6;
      border: 1px solid rgba(244, 114, 182, 0.25);
    }

    .proj-card-trio {
      grid-column: span 4 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 16px !important;
      min-height: 0 !important;
      background: var(--cardGrad) !important;
      border-radius: 20px !important;
      border: 1px solid var(--border) !important;
      cursor: pointer;
      align-self: stretch;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
      overflow: visible;
    }

    #projects .proj-card.hidden-project {
      display: none !important;
    }

    .proj-card-trio:hover {
      transform: translateY(-8px);
    }

    .proj-card-trio.pcc:hover {
      border-color: rgba(0, 229, 255, 0.4) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 229, 255, 0.1);
    }

    .proj-card-trio.pcp:hover {
      border-color: rgba(94, 201, 247, 0.4) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 20px rgba(94, 201, 247, 0.1);
    }

    .proj-card-trio.pca:hover {
      border-color: rgba(251, 191, 36, 0.4) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 20px rgba(251, 191, 36, 0.1);
    }

    .proj-card-trio .p-visual {
      flex: 0 0 auto !important;
      height: 200px !important;
      min-height: 200px !important;
      margin-bottom: 18px;
      border-radius: 12px !important;
      overflow: hidden;
      position: relative;
    }

    .proj-card-trio .p-info {
      flex: 1 1 auto !important;
      width: 100% !important;
      padding: 0 4px !important;
      display: flex !important;
      flex-direction: column !important;
      background: transparent !important;
    }

    .proj-card-trio .p-title-large {
      font-size: 1.35rem !important;
      font-weight: 800;
      margin-bottom: 4px !important;
      color: var(--text);
    }

    .proj-card-trio .p-desc-large {
      font-size: 0.88rem !important;
      line-height: 1.55 !important;
      margin-bottom: 14px !important;
      color: var(--muted2);
      display: block !important;
      -webkit-line-clamp: unset !important;
      line-clamp: unset !important;
      -webkit-box-orient: unset !important;
      overflow: visible !important;
      flex: 1 1 auto;
    }

    .proj-card-trio .badge-year {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      bottom: auto !important;
      padding: 2px 7px !important;
      background: rgba(0, 0, 0, 0.35) !important;
      color: rgba(255, 255, 255, 0.85) !important;
      font-size: 0.58rem !important;
      font-weight: 500 !important;
      border-radius: 4px !important;
      z-index: 5 !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      letter-spacing: 0.03em !important;
      min-width: 0 !important;
      width: auto !important;
      height: auto !important;
    }

    .proj-card-trio .image-label {
      position: absolute !important;
      top: 10px !important;
      left: 10px !important;
      padding: 4px 10px !important;
      font-size: 0.62rem !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      border-radius: 6px !important;
      z-index: 5 !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      letter-spacing: 0.05em !important;
    }

    .proj-card-trio .image-label.cyan {
      background: rgba(0, 229, 255, 0.2) !important;
      color: #00e5ff !important;
      border: 1px solid rgba(0, 229, 255, 0.35) !important;
    }

    .proj-card-trio .image-label.agentic {
      background: rgba(94, 201, 247, 0.22) !important;
      color: #5ba9d6 !important;
      border: 1px solid rgba(94, 201, 247, 0.35) !important;
    }

    .proj-card-trio .image-label.amber {
      background: rgba(251, 191, 36, 0.22) !important;
      color: #fbbf24 !important;
      border: 1px solid rgba(251, 191, 36, 0.35) !important;
    }

    .proj-card-trio .pstk {
      margin-top: auto !important;
      justify-content: flex-start !important;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .proj-card-trio .pill {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 0.68rem;
      padding: 4px 10px;
    }

    @media (max-width: 1100px) {
      .proj-card-trio {
        grid-column: span 6 !important;
      }
    }

    @media (max-width: 768px) {
      .proj-card-trio {
        grid-column: span 12 !important;
      }
    }

    .proj-card-preview .pill.pill-amber {
      background: rgba(251, 191, 36, 0.12);
      color: var(--amber);
      border: 1px solid rgba(251, 191, 36, 0.25);
    }

    .p-visual video,
    .p-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .proj-card-featured:hover .p-visual video,
    .proj-card-featured:hover .p-visual img,
    .proj-card-preview:hover .p-visual img {
      opacity: 0.8;
      transform: scale(1.04);
    }

    .badge-featured {
      position: absolute;
      top: 32px;
      left: 32px;
      padding: 10px 20px;
      background: rgba(255, 165, 0, 0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 165, 0, 0.3);
      border-radius: 100px;
      color: #ffa500;
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 3;
    }

    .badge-featured::before {
      content: '';
      width: 8px;
      height: 8px;
      background: #ffa500;
      border-radius: 50%;
      box-shadow: 0 0 15px #ffa500;
    }

    .badge-year {
      position: absolute;
      bottom: 32px;
      left: 32px;
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      font-family: var(--font-mono);
      z-index: 3;
    }

    .p-info {
      flex: 1;
      padding: 28px 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.03), transparent);
      position: relative;
      z-index: 2;
      text-align: center;
    }

    @media (max-width: 992px) {
      .p-info {
        padding: 40px;
      }
    }

    .p-tags-top {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tag-bubble {
      padding: 7px 16px;
      background: rgba(0, 229, 255, 0.08);
      border: 1.5px solid rgba(0, 229, 255, 0.45);
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 700;
      color: #38bdf8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
      transition: all 0.25s ease;
    }

    .tag-bubble.tb-c {
      border-color: rgba(0, 229, 255, 0.55);
      background: rgba(0, 229, 255, 0.12);
      color: var(--cyan);
      box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
    }

    .tag-bubble.tb-p {
      border-color: rgba(94, 201, 247, 0.55);
      background: rgba(94, 201, 247, 0.12);
      color: var(--steel-blue);
      box-shadow: 0 0 14px rgba(94, 201, 247, 0.25);
    }

    .tag-bubble.tb-a {
      border-color: rgba(251, 191, 36, 0.55);
      background: rgba(251, 191, 36, 0.12);
      color: var(--amber);
      box-shadow: 0 0 14px rgba(251, 191, 36, 0.25);
    }

    .tag-bubble.tb-g {
      border-color: rgba(52, 211, 153, 0.55);
      background: rgba(52, 211, 153, 0.12);
      color: var(--green);
      box-shadow: 0 0 14px rgba(52, 211, 153, 0.25);
    }

    .tag-bubble.tb-pk {
      border-color: rgba(244, 114, 182, 0.55);
      background: rgba(244, 114, 182, 0.12);
      color: var(--pink);
      box-shadow: 0 0 14px rgba(244, 114, 182, 0.25);
    }

    .p-title-large {
      font-family: var(--font-display);
      font-size: 2.8rem;
      font-weight: 700;
      letter-spacing: var(--heading-tracking);
      line-height: 1.05;
      margin: 0;
      color: var(--text);
      white-space: normal;
      max-width: 100%;
    }

    @media (max-width: 480px) {
      .p-title-large {
        font-size: 2.4rem;
      }
    }

    .p-desc-large {
      font-size: 1.15rem;
      line-height: 1.65;
      color: var(--muted2);
      max-width: 100%;
      text-align: center;
      margin: 0;
    }

    @media (max-width: 992px) {
      .proj-card-preview {
        padding: 14px !important;
      }

      .proj-card-preview .p-visual {
        flex: 0 0 auto !important;
        height: 210px;
        min-height: 210px;
      }

      .proj-card-preview .p-info {
        padding: 16px 4px 4px;
      }
    }

    .p-actions-row {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 15px;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
    }

    .shimmer-btn {
      position: relative;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      padding: 18px 36px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 1rem;
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 25px rgba(217, 119, 6, 0.35);
    }

    .shimmer-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: rotate(30deg);
      animation: shimmerEffect 4s infinite;
    }

    @keyframes shimmerEffect {
      0% {
        transform: translateX(-150%) rotate(30deg);
      }

      20% {
        transform: translateX(150%) rotate(30deg);
      }

      100% {
        transform: translateX(150%) rotate(30deg);
      }
    }

    .shimmer-btn:hover {
      box-shadow: 0 15px 35px rgba(217, 119, 6, 0.45);
      filter: brightness(1.15);
    }

    .github-icon-btn {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      font-size: 1.4rem;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .github-icon-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.25);
    }


    .pca:hover .parr {
      background: rgba(251, 191, 36, .12);
      color: var(--amber);
      border-color: rgba(251, 191, 36, .4);
    }

    @media(min-width:801px) {
      .proj-span-7 {
        grid-column: span 7;
      }

      .proj-span-5 {
        grid-column: span 5;
      }

      .proj-span-4 {
        grid-column: span 4;
      }

      .proj-span-6 {
        grid-column: span 6;
      }
    }

    @keyframes rotate-bg {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .premium-glow {
      position: relative;
      background: var(--bg) !important;
      z-index: 1;
      overflow: hidden !important;
      border: none !important;
    }

    .premium-glow::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: conic-gradient(from 0deg,
          transparent 0%,
          var(--cyan) 15%,
          transparent 30%,
          var(--steel-blue) 50%,
          transparent 65%,
          var(--pink) 85%,
          transparent 100%);
      animation: rotate-bg 5s linear infinite;
      z-index: -2;
    }

    .premium-glow::after {
      content: '';
      position: absolute;
      inset: 1px;
      background: var(--cardGrad);
      border-radius: 15px;
      z-index: -1;
    }


    @keyframes featGlow {

      0%,
      100% {
        border-color: rgba(0, 229, 255, .15);
        box-shadow: 0 0 10px rgba(0, 229, 255, .05);
      }

      50% {
        border-color: rgba(0, 229, 255, .5);
        box-shadow: 0 0 24px rgba(0, 229, 255, .2);
      }
    }

    .proj-card:has(.pfeat) {
      animation: featGlow 4s ease-in-out infinite;
    }

    .sk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 28px;
    }

    .sk-grp {
      background: var(--card);
      border: none;
      padding: 26px 22px;
      position: relative;
      overflow: visible;
      border-radius: 12px;
    }



    .sk-grp h3 {
      font-family: var(--font-display);
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .sk-ul {
      list-style: none;
    }

    .sk-ul li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .03);
      color: var(--muted2);
      font-size: .82rem;
      transition: color .2s, gap .2s;
    }

    .sk-ul li:hover {
      color: var(--text);
      gap: 12px;
    }

    .sdot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ct-wrap {
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .ct-wrap.ct-play {
      animation: ctIn 1s cubic-bezier(.16, 1, .3, 1) both;
    }

    .ct-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 360px;
      background: radial-gradient(ellipse, rgba(94, 201, 247, .12) 0%, transparent 70%);
      pointer-events: none;
      animation: ctPulse 8s ease-in-out infinite;
    }

    .ct-big {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2rem, 5.5vw, 5rem);
      letter-spacing: var(--heading-tracking);
      line-height: 1.05;
      margin-bottom: 16px;
    }

    .ct-sub {
      color: var(--muted2);
      max-width: 420px;
      margin: 0 auto 0;
      font-size: .95rem;
      line-height: 1.8;
    }

    .ct-card {
      position: relative;
      max-width: 920px;
      margin: 34px auto 0;
      padding: clamp(22px, 3vw, 30px);
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(0, 229, 255, 0.10), transparent 30%),
        linear-gradient(315deg, rgba(244, 114, 182, 0.10), transparent 34%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
      text-align: left;
    }

    .ct-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cyan), var(--steel-blue), var(--pink), var(--amber));
    }

    .ct-card::after {
      content: '';
      position: absolute;
      inset: 4px 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
      pointer-events: none;
    }

    .ct-card-hd {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .ct-card-kicker {
      font-family: var(--font-mono);
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 8px;
    }

    .ct-card-title {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 2.4vw, 1.75rem);
      font-weight: 700;
      letter-spacing: var(--heading-tracking);
      color: var(--text);
      margin: 0;
    }

    .ct-card-copy {
      max-width: 520px;
      color: var(--muted2);
      line-height: 1.75;
      font-size: .94rem;
      margin: 8px 0 0;
    }

    .ct-direct {
      margin-bottom: 18px;
    }

    .ct-social-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 18px 0 12px;
      color: var(--muted2);
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .ct-social-label::after {
      content: '';
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent);
    }

    .ct-card-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .ct-card-actions .cl {
      justify-content: center;
      min-height: 54px;
      --cl-bg: rgba(255, 255, 255, 0.04);
      --cl-border: rgba(255, 255, 255, 0.1);
      --cl-color: var(--text);
      background: var(--cl-bg);
      border-color: var(--cl-border);
      color: var(--cl-color);
      font-weight: 700;
      font-size: .82rem;
      width: 100%;
      gap: 10px;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .cl-ico {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .ct-card-actions .cl:hover {
      border-color: var(--cl-border);
      background: var(--cl-bg);
      color: var(--cl-color);
    }

    .ct-direct .cl {
      min-height: 74px;
      justify-content: flex-start;
      --cl-bg: rgba(255, 255, 255, 0.04);
      --cl-border: rgba(255, 255, 255, 0.1);
      --cl-color: var(--text);
      background: var(--cl-bg);
      border-color: var(--cl-border);
      color: var(--cl-color);
      padding: 14px 16px;
      border-radius: 16px;
      box-shadow: 0 16px 34px rgba(234, 67, 53, 0.22);
    }

    .cl-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .cl-title {
      font-size: .94rem;
      font-weight: 850;
      line-height: 1.1;
    }

    .cl-note {
      overflow: hidden;
      color: currentColor;
      font-size: .72rem;
      font-weight: 650;
      line-height: 1.25;
      opacity: .78;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ct-card-actions .clc,
    .ct-direct .clc {
      --cl-bg: #ea4335;
      --cl-border: #ea4335;
      --cl-color: #ffffff;
    }

    .ct-card-actions>a.clp {
      --cl-bg: #0a66c2;
      --cl-border: #0a66c2;
      --cl-color: #ffffff;
      font-weight: 800;
    }

    .ct-card-actions>a.clpk {
      --cl-bg: #ffffff;
      --cl-border: #ffffff;
      --cl-color: #111111;
      font-weight: 800;
    }

    .ct-card-actions>a.cla {
      --cl-bg: #fbbf24;
      --cl-border: #fbbf24;
      --cl-color: #1f2937;
      font-weight: 800;
    }

    .ct-card-actions>a.clhf {
      --cl-bg: #ffcc4d;
      --cl-border: #ffcc4d;
      --cl-color: #111827;
      font-weight: 800;
    }

    .ct-card-actions>a.clkg {
      --cl-bg: #20beff;
      --cl-border: #20beff;
      --cl-color: #042f3f;
      font-weight: 800;
    }

    .ct-card-actions .clp .cl-ico,
    .ct-card-actions .clc .cl-ico,
    .ct-card-actions .clhf .cl-ico,
    .ct-card-actions .clkg .cl-ico,
    .ct-card-actions>a.clc .cl-ico,
    .ct-card-actions>a.clp .cl-ico,
    .ct-card-actions>a.clpk .cl-ico,
    .ct-card-actions>a.cla .cl-ico,
    .ct-card-actions>a.clhf .cl-ico,
    .ct-card-actions>a.clkg .cl-ico {
      color: currentColor;
    }

    .ct-links {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 40px;
      flex-wrap: wrap;
    }

    .cl {
      padding: 11px 22px;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--muted2);
      text-decoration: none;
      font-size: .78rem;
      letter-spacing: .04em;
      transition: all .2s;
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 500;
    }

    .clc:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    .clp:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    .clpk:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    .cla:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

/* Hackathon Project Badge on Featured Project Card */
.proj-card .badge-hackathon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}

html[data-theme="light"] .proj-card .badge-hackathon {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(217, 119, 6, 0.6);
  color: #b45309;
}

/* Mobile showcase: retain the full story without desktop-sized media/spacing.
   Specificity keeps these domain rules above the shared visual overrides. */
@media (max-width: 640px) {
  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .p-visual {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .p-info {
    padding: 16px 6px 8px !important;
    gap: 10px !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .p-title-large {
    white-space: normal !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .p-desc-large {
    font-size: .9rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) :is(.p-tags-top, .pstk) {
    gap: 6px !important;
    margin: 0 !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .badge-featured-gold {
    margin-bottom: 0 !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .tag-bubble {
    padding: 5px 8px;
    font-size: .65rem;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .p-actions-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  #projects .proj-card:is(#gemmaclaim-card, #aiemployee-card) .shimmer-btn {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: .88rem !important;
  }
}

@media (max-width: 640px) {
  .all-projects-page .all-projects-main { padding-top: 104px; }
  .all-projects-page .all-projects-hero { gap: 16px; margin-bottom: 20px; }
  .all-projects-page .all-projects-title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; }
  .all-projects-page .all-projects-copy { margin-top: 12px; font-size: .94rem; line-height: 1.6; }
  .all-projects-page .portfolio-back-link { min-height: 44px; }
  .all-projects-page .filters { gap: 8px; margin-bottom: 20px; }
  .all-projects-page .filter-btn { min-height: 44px; }
  .all-projects-page .all-grid { gap: 16px; }
}