/* ---------- below the fold ----------
   The hero above stays exactly one screen; everything below scrolls.
   Same faces, same hairlines, same dark stage. */
    .below {
      position: relative;
      background: #141B26;
      color: #e8eaf5;
      padding: calc(64*var(--u)) calc(60*var(--u)) calc(60*var(--u));
      display: flex;
      flex-direction: column;
      gap: clamp(48px, 7vw, 96px)
    }

    .band {
      --p2-radius: 40px;
      position: relative;
      background: #0C0C0C;
      border: 1px solid rgba(215, 226, 234, .14);
      border-radius: var(--p2-radius);
      padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
      box-sizing: border-box
    }

    @media (min-width: 640px) {
      .band {
        --p2-radius: 50px
      }
    }

    @media (min-width: 768px) {
      .band {
        --p2-radius: 60px
      }
    }

    .band-kicker {
      margin: 0 0 clamp(24px, 4vw, 48px);
      text-align: center;
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(34px, 6vw, 84px);
      letter-spacing: -.02em;
      text-transform: uppercase;
      color: #BBCCD7;
      background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent
    }

    .band h2 {
      display: none
    }

    .xcard {
      border: 1px solid rgba(215, 226, 234, .14);
      border-radius: clamp(18px, 2.4vw, 28px);
      padding: clamp(20px, 2.6vw, 32px) clamp(22px, 2.8vw, 34px);
      margin: 0;
      background: #131417;
      transition: border-color .3s ease, background .3s ease, box-shadow .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1)
    }

    .xcard:hover {
      border-color: rgba(215, 226, 234, .32);
      background: #16181c;
      /* 3D glow: dark elevation for depth beneath the cool light halo,
         plus a small lift so the card reads as floating */
      box-shadow:
        0 34px 70px rgba(4, 7, 13, .55),
        0 0 40px rgba(215, 226, 234, .14);
      transform: translateY(calc(-5*var(--t)))
    }

    .xcard h3 {
      margin: .15em 0 .35em;
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-size: calc(22*var(--t));
      color: #F4F8FB
    }

    .xcard p {
      font-size: calc(16*var(--t));
      line-height: 1.7;
      color: rgba(215, 226, 234, .78)
    }

    .xmeta {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: calc(11.5*var(--t));
      letter-spacing: calc(1.2*var(--t));
      color: #646973
    }

    .xrole {
      color: rgba(187, 204, 215, .65) !important;
      font-weight: 700
    }

    .xcard ul {
      margin: .5em 0;
      padding-left: 1.2em;
      font-size: calc(15*var(--t));
      line-height: 1.7;
      color: rgba(215, 226, 234, .78)
    }

    .xtags {
      display: flex;
      flex-wrap: wrap;
      gap: calc(8*var(--t));
      margin: calc(10*var(--t)) 0 0
    }

    .xtags span {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: calc(12*var(--t));
      letter-spacing: calc(.6*var(--t));
      text-transform: uppercase;
      color: #BBCCD7;
      background: rgba(215, 226, 234, .08);
      border: 1px solid rgba(215, 226, 234, .16);
      border-radius: 999px;
      padding: calc(7*var(--t)) calc(14*var(--t))
    }

    .xcerts {
      list-style: none;
      padding-left: 0 !important
    }

    .skill-3d {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(14px, 2vw, 24px);
      max-width: 1120px;
      margin: 0 auto
    }

    .skill-card-3d {
      flex: 1 1 clamp(260px, 30%, 420px);
      box-sizing: border-box;
      transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1);
      cursor: pointer
    }

    .skill-card-3d h3 {
      margin: .15em 0 .5em;
      font-size: calc(20*var(--t));
      color: #F4F8FB
    }